Stitch React

Stitch to React Components

Converts HTML screens generated by Stitch into a reusable React component system. Includes design token extraction, component decomposition, and automated verification.

Overview

This skill transforms Stitch's static HTML output into production-ready React components:

1. Design token extraction: Extract colors, typography, spacing as tokens
2. Component decomposition: Separate HTML into reusable components
3. TypeScript support: Auto-generate Props type definitions
4. Verification: Syntax and type verification of generated components

Prerequisites

• Stitch MCP server access
• Stitch project with generated screens
• Node.js environment (React project)
• DESIGN.md file (optional, improves token consistency. If missing, create it first with the stitch-design-md skill -- execution order: stitch-design-md → this skill)

Conversion Workflow

Step 1: Retrieve Stitch Screen

# Download screen HTML via Stitch MCP
[prefix]:get_screen call
-> Download HTML from htmlCode.downloadUrl
-> Save as source.html

Step 2: Extract Design Tokens

Analyze Tailwind classes and inline styles from Stitch HTML to extract design tokens.

Step 3: Component Decomposition

Analyze HTML structure and decompose into reusable components.

Decomposition Principles

Step 4: Component Generation

Generate typed React components with CVA variants.

Step 5: Verification

# Type check
npx tsc --noEmit

# Lint check
npx eslint components/

Output File Structure

src/
├── tokens/
│   ├── index.ts
│   ├── colors.ts
│   ├── typography.ts
│   ├── spacing.ts
│   └── shadows.ts
├── components/
│   ├── primitives/
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── ...
│   ├── patterns/
│   │   ├── Card.tsx
│   │   └── ...
│   ├── blocks/
│   │   ├── Header.tsx
│   │   └── ...
│   └── index.ts
├── lib/
│   └── utils.ts
└── pages/
    └── [StitchPage].tsx   # Converted full page

Common Conversion Patterns

Tailwind -> CSS-in-JS

// Stitch HTML
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">

// React component
<Button variant="primary" size="md">

Static Content -> Props

// Stitch HTML
<h1 class="text-3xl font-bold">Welcome to Our App</h1>

// React component
<Heading size="xl">{title}</Heading>

Repeated Elements -> Mapping

// Stitch HTML (repeated cards)
<div class="card">...</div>
<div class="card">...</div>

// React component
{items.map((item) => (
  <Card key={item.id} {...item} />
))}

Pitfalls to Avoid

Resources

• Stitch docs: https://stitch.withgoogle.com/docs/
• class-variance-authority: https://cva.style/docs
• Tailwind CSS: https://tailwindcss.com/docs
• Radix UI: https://www.radix-ui.com/ (accessible primitives)