# Stitch React

> 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.

- Skill: `jh941213/stitch-react-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jh941213/stitch-react-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jh941213/stitch-react-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jh941213 (https://skillmd.com/u/jh941213)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jh941213/stitch-react-2

---


# 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

```bash
# 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

```bash
# 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

```typescript
// 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

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

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

### Repeated Elements -> Mapping

```typescript
// 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)