Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.
Add this skill
npx mdskills install google-labs-code/react-componentsComprehensive design-to-code pipeline with rigorous validation and type safety enforcement
1---2name: react:components3description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.4allowed-tools:5 - "stitch*:*"6 - "Bash"7 - "Read"8 - "Write"9 - "web_fetch"10---1112# Stitch to React Components1314You 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.1516## Retrieval and networking171. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.182. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.193. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.20 - Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html"`.21 - This script handles the necessary redirects and security handshakes.224. **Visual audit**: Check `screenshot.downloadUrl` to confirm the design intent and layout details.2324## Architectural rules25* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.26* **Logic isolation**: Move event handlers and business logic into custom hooks in `src/hooks/`.27* **Data decoupling**: Move all static text, image URLs, and lists into `src/data/mockData.ts`.28* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.29* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.30* **Style mapping**:31 * Extract the `tailwind.config` from the HTML `<head>`.32 * Sync these values with `resources/style-guide.json`.33 * Use theme-mapped Tailwind classes instead of arbitrary hex codes.3435## Execution steps361. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.372. **Data layer**: Create `src/data/mockData.ts` based on the design content.383. **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.394. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.405. **Quality check**:41 * Run `npm run validate <file_path>` for each component.42 * Verify the final output against the `resources/architecture-checklist.md`.43 * Start the dev server with `npm run dev` to verify the live result.4445## Troubleshooting46* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.47* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.
Full transparency — inspect the skill content before installing.