stitch-react-components

To convert Stitch design screens into React components, this Skill fetches screen HTML via Stitch MCP calls and scaffolds modular React files. It maps extracted Tailwind theme values to a local style guide while wiring the output directly into a Vite/React app.

AST validation prevents hardcoded hex colors by running an AST-based validator that enforces TypeScript Readonly props interfaces and blocks inline hex styling. This quality gate ensures generated React components rely strictly on mapped Tailwind theme values for visual fidelity.

Yes, you can extract Tailwind theme values from Stitch HTML for a Vite app. The Skill fetches Stitch HTML, extracts the theme values, and maps those styles to your local style guide before scaffolding the React components into your Vite project.

The best way to scaffold React components following Atomic Design from design screens is using an automated generator that isolates logic into hooks and data into a mock layer. This Skill aligns generated modular files to Atomic Design structures for safe frontend code generation.

Fetching Stitch screen HTML can fail with TLS or GCS redirect issues during standard MCP retrieval. This Skill resolves these network fetching errors by using a system-level fetch script to reliably download Stitch HTML and screenshots.

You do not need a pre-existing local TypeScript style guide before converting Stitch designs. The Skill extracts Tailwind theme values from the Stitch screens and maps the styles to your local environment, enforcing TypeScript Readonly props interfaces during component scaffolding.