What problem does it solve? Turning visual designs from Stitch into production React code is slow and error-prone: fetching design assets from signed URLs fails, styles get hardcoded, and components end up as monolithic files without type safety. This Skill automates the full design-to-code pipeline with enforced architectural rules. ## Core Features & Use Cases - Stitch MCP integration: Discovers the Stitch tool namespace, fetches screen metadata via get_screen, and downloads HTML through a resilient curl-based script that handles redirects and security handshakes. - Enforced architecture: Generates modular components with logic extracted to custom hooks, static data moved to src/data/mockData.ts, and Readonly TypeScript props interfaces. - AST-based validation: Runs an SWC-powered validator that parses each component to confirm Props interfaces exist and no hardcoded hex colors remain in className attributes. - Use Case: A developer receives a Stitch design link for a dashboard card. The Skill fetches the HTML and screenshot, extracts the Tailwind config, generates typed components from the provided template, and validates them against the architecture checklist before wiring them into App.tsx. ## Quick Start Convert this Stitch screen into React components and validate the output with the included scripts.
