Stitch React Components

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 7b53207b94e62911777d53d4238b5f8c88c2b519, 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.