Stitch React Components

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 3f64079d75d025bc5890c73669f27c26a2d80b31, source path plugins/stitch-build/skills/react-components. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them.

When to Use This Skill

• Use when a Stitch screen or export should become modular React components or an existing React surface must be synchronized with newer Stitch evidence.
• The task involves Google Stitch project IDs, .stitch/ artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation.
• The broader stitch-design router points here as the narrowest workflow.

Workflow

1. Acquire source HTML and screenshots from .stitch/designs/, Stitch web exports, or current host-listed screen tools.
2. Do not assume get_screen or list_screens exists in this workspace.
3. Record available project and screen identifiers plus the sync timestamp in .stitch/metadata.json when that evidence exists.
4. Extract current color, typography, spacing, and radius tokens from the exported HTML before editing components.
5. Move static copy, image URLs, and lists into src/data/mockData.ts.
6. Create small components with Readonly prop interfaces and isolate interactions in hooks.
7. Map Stitch theme values into Tailwind/theme tokens, replace placeholder links with real application routes, and cover dark-mode states instead of scattering raw hex values.
8. Run the bundled validator where dependencies are available, then run the app build or dev check.