Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
Permissions
Files
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality.
Version history
CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.
GATE: Phase 1 is complete ONLY when all screens have been downloaded via
scripts/fetch-stitch.shAND visually audited. Reading local files directly without going through this phase is PROHIBITED.
list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.[prefix]:get_screen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen..stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"=w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png".stitch/designs/{page}.png) to confirm design intent and layout details. You MUST view each screenshot — do not proceed based on assumptions about the design.[prefix]:get_project and save it to .stitch/metadata.json (inside the app folder, and mirrored in the workspace root). Ensure it has:
projectId, title, deviceTypeLast Sync Time field matching the current sync ISO execution timescreens map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition..stitch/designs/*.html directly without calling MCP get_screen first.fetch-stitch.sh download script..png screenshots..stitch/metadata.json and its Last Sync Time field upon syncing.GATE: Phase 2 is complete ONLY when
resources/style-guide.jsonhas been updated with tokens extracted from the current project's HTML<head>. Tokens from a previous project are NOT acceptable.
tailwind.config: Open each downloaded HTML file and locate the tailwind.config object in the <head> <script> block. Extract:
resources/style-guide.json: Overwrite the file with the extracted tokens from THIS project. The style guide MUST match the Stitch project being converted.style-guide.json match what you extracted.style-guide.json as-is without verifying it matches the current project.GATE: Every component MUST satisfy ALL of the following rules. Violations will cause
npm run validateto fail.
src/components/. Monolithic page files that contain everything are PROHIBITED.src/hooks/. Examples: pagination logic → usePagination, filtering → useFilter.src/data/mockData.ts. No hardcoded content in components.Readonly TypeScript interface named [ComponentName]Props. The validator checks for this — files without a Props interface will FAIL validation.href="#" placeholder links. When building a multi-page React app:
href="#" anchors with React Router <Link> components pointing to the correct routes.<Link to="/"> so users can navigate home from any page. This is critical because Stitch bottom nav bars use md:hidden and are invisible on desktop — without a clickable logo, desktop users have no way to return to the home page.<Link> with active-state highlighting based on useLocation().style-guide.json. No arbitrary hex codes.dark: variants to ALL color classes throughout every component.[Name]Props interface.href="#" links unconverted.GATE: Phase 4 verification, audits, and validation checks are optional. You MUST ask the user's permission to proceed with validation scripts, running local dev servers, or automated browser testing.
node_modules is missing, run npm install to enable the validation tools.src/data/mockData.ts based on the design content.resources/component-template.tsx as a base. Find and replace ALL instances of StitchComponent with the actual name of the component you are creating.App.tsx) to render the new components.npm run validate <file_path> for EVERY .tsx file in src/components/ and src/pages/ to report component validity.tsc --noEmit to verify TypeScript compile status.resources/architecture-checklist.md.npm run dev or initiating visual browser audits to verify the live result.Props interface — every component (including pages) needs one.href="#" placeholders everywhere. Every <a href="#"> must be converted to a <Link to="/route"> with a real route. Verify all nav items are clickable and lead to the correct page.style-guide.json likely has tokens from a different project. Re-extract from the current HTML <head>.In these kits
Works with
Claude, Codex, Cursor & more