What problem does it solve?
Converting Stitch MCP design screens into production-quality React components is time consuming, error prone, and often requires system-level asset retrieval and manual style mapping. This Skill automates secure downloading of design artifacts, extracts and reconciles Tailwind theme values, and scaffolds TypeScript React components with enforced type safety and validation.
Core Features & Use Cases
- Secure asset retrieval: Uses a domain-allowlisted system fetcher to reliably download signed Stitch HTML and screenshots while preventing SSRF.
- Design-to-code scaffolding: Generates Atomic Design-pattern React components and moves static content into a centralized mock data layer.
- AST-based validation & quality gate: Enforces Readonly Props interfaces, prevents hardcoded hex values, and runs automated AST checks before marking components as valid.
- Use Case: Convert a Stitch Landing Page screen into modular Vite/React TypeScript components, sync theme tokens with an existing Tailwind config, and validate each output file.
Quick Start
Convert the Landing Page screen from my Stitch project into modular TypeScript React components and wire them into the project's App.tsx.
