Agent skill · software engineering · aiskillstore
react-components
Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
Why this skill is useful
Adds specific scripts and architectural rules for converting Stitch designs into React components that the AI wouldn't reliably generate on its own.
What it needs
Requires bash installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Stitch to React Components You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality. Retrieval and networking 1. Namespace discovery: Run listtools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls. 2. Metadata fetch: Call [prefix]:getscreen to retrieve the design JSON. 3. High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains. Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html". This script handles the necessary redirects and security handshakes. 4. Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details. Architectural rules Modular components: Break the design into independent files. Avoid large, single-file outputs. Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/. Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts. Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props. Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components. Style mapping: Extract the tailwind.config from the HTML <head>. Sync these values with resources/style-guide.json. Use theme-mapped Tailwind classes instead of arbitrary hex codes. Execution steps 1. Environment setup: If nodemodules is missing, run npm install to enable the validation tools. 2. Data layer: Create src/data/mockData.ts based on the design content. 3. Component drafting: Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating. 4. Application wiring: Update the project entry point (like App.tsx) to render the new components. 5. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-components