stitch-react

name	stitch-react
description	Converts Stitch screens into a React component system -- includes design token extraction, component decomposition, TypeScript type generation, and automated verification. Triggers on: Stitch React, component conversion, React conversion, HTML to React. NOT for: creating new React apps, API implementation.
user-invocable	true
allowed-tools	["stitch*:*","mcp__stitch*","Read","Write","Edit","Bash"]

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)

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

Principle	Description
Single responsibility	Each component has one role
Reusability	Identify patterns used in multiple places
Composability	Build larger components from smaller ones
Props-based	Customize via Props instead of hardcoding

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

Issue	Solution
All styles inline	Use tokens and variants
Hardcoded text	Pass via Props
Single massive component	Decompose into smaller components
Missing type definitions	TypeScript types for all Props
Ignoring accessibility	ARIA attributes and semantic HTML

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)