What problem does it solve? Turning Stitch design screens into production React code by hand is slow and error-prone: designs get mistranslated, hex values get hardcoded, navigation links stay as dead placeholders, and components end up as monolithic files. This Skill automates the full design-to-code pipeline with enforced quality gates. ## Core Features & Use Cases - Design retrieval and sync: Fetches every screen's HTML and screenshot from the Stitch MCP server using a curl-based script that handles Google Cloud Storage redirects, and tracks project metadata in .stitch/metadata.json. - Style token extraction: Parses the tailwind.config block from each screen's HTML head and syncs colors, fonts, and spacing into resources/style-guide.json so generated components use theme-mapped classes. - Enforced architecture: Generates modular components with custom hooks, a decoupled mockData.ts data layer, Readonly Props interfaces, React Router navigation wiring, and dark-mode variants. - Automated validation: Runs an AST check via @swc/core to reject hardcoded hex colors and missing Props interfaces, plus a 20-point architecture checklist. - Use Case: Ask the agent to convert your Stitch project's landing page into a React component system, and it will download the designs, extract the theme, scaffold typed components, and validate every file. ## Quick Start Convert my Landing Page screen in my Podcast Stitch Project to a React component system.
