Stitch → React Components (shadcn/ui + Tailwind)
Transform Stitch designs into modular React code using shadcn/ui and Tailwind CSS. Load the shadcn-ui skill for component discovery, installation, theming, and API reference.
Stitch design generation
When calling generate_screen_from_text or edit_screens, always append to the prompt:
Style this in a clean, modern aesthetic using Tailwind CSS utility classes.
Stitch retrieval
- Call
get_screen to retrieve the design JSON (discover the Stitch MCP prefix via list_tools first).
- HTML is the primary source. Download
htmlCode.downloadUrl to a local temp file before reading it. Use: bash .claude/skills/react-components/scripts/fetch-stitch.sh "<url>" "temp/source.html". Then read the downloaded file with the Read tool.
- CRITICAL: Always download HTML to disk first. Never read Stitch HTML directly in the orchestrator's context — it's too large and wastes token budget. Download to
temp/<descriptive-name>.html and have sub-agents read from disk. This applies to both orchestrators delegating work and sub-agents doing the conversion.
- Do not use screenshots. Never use the screenshot URL as a substitute for reading the HTML. Never ask another AI to describe a screenshot — the HTML contains the exact DOM, CSS tokens, text, and asset URLs. Screenshots lose fidelity and waste tokens on vision processing.
Architectural rules
- Break designs into modular component files — no monoliths.
- Event handlers and logic → custom hooks in
src/hooks/.
- Static text, image URLs, lists →
src/data/mockData.ts.
- Every component gets a
Readonly<[Name]Props> interface.
- Use shadcn/ui components for standard UI primitives (Button, Card, Badge, Dialog, etc.). Load the
shadcn-ui skill for component selection and API usage. Fall back to semantic HTML + Tailwind only when no shadcn equivalent exists.
- Extract design tokens from the Stitch HTML
<head> into CSS variables in src/globals.css (see resources/style-guide.json). Use Tailwind utility classes — no inline hex codes.
- Omit Google license headers from generated components.
Code quality
Follow resources/code-quality-guide.md for all component work — covers type safety, DRY, Tailwind styling (CSS modules where needed, utility classes for one-offs), correct hook/component usage, accessibility, and theme defaults.
Execution steps
- Run
bun install if node_modules is missing.
- Create/update
src/globals.css — map Stitch design tokens to Tailwind CSS variables.
- Create
src/data/mockData.ts from design content.
- Draft components from
resources/component-template.tsx — replace StitchComponent placeholder, use shadcn/ui components (load the shadcn-ui skill for guidance) and Tailwind classes.
- Wire into app entry.
- Validate:
bun run validate <file>, check resources/architecture-checklist.md, run bun run dev.
Troubleshooting
- Fetch errors: Quote the URL in the bash command.
- Validation errors: Check AST report for missing interfaces or hardcoded styles.
- Missing shadcn components: Run
bunx shadcn@latest add <component> to install.
- Style conflicts: Use the
cn() utility from src/lib/utils.ts for class merging.
1---2name: react-components3description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.4---56# Stitch → React Components (shadcn/ui + Tailwind)78Transform Stitch designs into modular React code using **shadcn/ui** and **Tailwind CSS**. Load the `shadcn-ui` skill for component discovery, installation, theming, and API reference.910## Stitch design generation1112When calling `generate_screen_from_text` or `edit_screens`, always append to the prompt:1314> Style this in a clean, modern aesthetic using Tailwind CSS utility classes.1516## Stitch retrieval17181. Call `get_screen` to retrieve the design JSON (discover the Stitch MCP prefix via `list_tools` first).192. **HTML is the primary source.** Download `htmlCode.downloadUrl` to a **local temp file** before reading it. Use: `bash .claude/skills/react-components/scripts/fetch-stitch.sh "<url>" "temp/source.html"`. Then read the downloaded file with the Read tool.203. **CRITICAL: Always download HTML to disk first.** Never read Stitch HTML directly in the orchestrator's context — it's too large and wastes token budget. Download to `temp/<descriptive-name>.html` and have sub-agents read from disk. This applies to both orchestrators delegating work and sub-agents doing the conversion.214. **Do not use screenshots.** Never use the screenshot URL as a substitute for reading the HTML. Never ask another AI to describe a screenshot — the HTML contains the exact DOM, CSS tokens, text, and asset URLs. Screenshots lose fidelity and waste tokens on vision processing.2223## Architectural rules2425* Break designs into modular component files — no monoliths.26* Event handlers and logic → custom hooks in `src/hooks/`.27* Static text, image URLs, lists → `src/data/mockData.ts`.28* Every component gets a `Readonly<[Name]Props>` interface.29* Use shadcn/ui components for standard UI primitives (Button, Card, Badge, Dialog, etc.). Load the `shadcn-ui` skill for component selection and API usage. Fall back to semantic HTML + Tailwind only when no shadcn equivalent exists.30* Extract design tokens from the Stitch HTML `<head>` into CSS variables in `src/globals.css` (see `resources/style-guide.json`). Use Tailwind utility classes — no inline hex codes.31* Omit Google license headers from generated components.3233## Code quality3435Follow `resources/code-quality-guide.md` for all component work — covers type safety, DRY, Tailwind styling (CSS modules where needed, utility classes for one-offs), correct hook/component usage, accessibility, and theme defaults.3637## Execution steps38391. Run `bun install` if `node_modules` is missing.402. Create/update `src/globals.css` — map Stitch design tokens to Tailwind CSS variables.413. Create `src/data/mockData.ts` from design content.424. Draft components from `resources/component-template.tsx` — replace `StitchComponent` placeholder, use shadcn/ui components (load the `shadcn-ui` skill for guidance) and Tailwind classes.435. Wire into app entry.446. Validate: `bun run validate <file>`, check `resources/architecture-checklist.md`, run `bun run dev`.4546## Troubleshooting4748* **Fetch errors**: Quote the URL in the bash command.49* **Validation errors**: Check AST report for missing interfaces or hardcoded styles.50* **Missing shadcn components**: Run `bunx shadcn@latest add <component>` to install.51* **Style conflicts**: Use the `cn()` utility from `src/lib/utils.ts` for class merging.
vobase