# Stitch React Components
> Convert Stitch HTML and screenshots into modular Vite/React/TypeScript components, or sync existing components to updated Stitch designs, with local architecture and validation checks.
- Skill: `practicalswan/stitch-react-components` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds add practicalswan/stitch-react-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/practicalswan/stitch-react-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: practicalswan (https://skillmd.com/u/practicalswan)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/practicalswan/stitch-react-components
---
# 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.
## Local Assets
- `examples/`, `resources/`, `references/`, or `reference/` are upstream support material when present. Treat `SKILL.md` as the source of truth if a support file mentions an unavailable MCP tool.
- `scripts/` are optional helpers. On Windows, prefer PowerShell or Node equivalents unless Git Bash or WSL is actually available.
- Keep generated `.stitch/` files out of commits unless the user explicitly wants them as durable examples.
## Corrected Stitch MCP Surface
Verified in this workspace on 2026-06-15: `create_project`, `upload_design_md`, `create_design_system_from_design_md`, `list_design_systems`, and `apply_design_system`. This 2026-07-29 source refresh did not re-verify a broader live MCP surface. Do not claim `list_projects`, `list_screens`, `get_project`, `get_screen`, `generate_screen_from_text`, `edit_screens`, or `generate_variants` were used unless the current host exposes those exact tools in the active tool list.
## Cross-Client Portability
This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.
- GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the
workflow in project instructions when folder discovery is unavailable.
- Claude Code: keep the folder in a local skills directory or a compatible plugin source.
- Codex: install or sync the folder into
`$CODEX_HOME/skills/stitch-react-components` and restart Codex after major changes.
## MCP Availability And Fallback
Preferred MCP Server: Stitch MCP
- Fallback prompt: "Use the Stitch React Components skill without MCP. Follow the documented local or manual fallback, show the selected tool surface, and report the verification evidence."
- Use local `.stitch/` artifacts, exported HTML or screenshots, bundled scripts, and the Stitch web UI when the host does not expose the needed Stitch MCP operation.
- Do not claim screen lookup, generation, editing, or variant MCP calls unless those tools are present in the active host tool list.
- Do not claim an MCP operation was used when the active host does not expose it.
## Anti-Patterns
- Claiming a Stitch screen-generation, screen-editing, or screen-retrieval MCP call succeeded when the active host does not expose that tool.
- Uploading files, screenshots, HTML, markdown, or design assets to Stitch without user-approved destination and artifact details.
- Reading, printing, storing, or committing Stitch API keys, MCP config secrets, cookies, or credential-bearing files.
- Treating generated design or code as final without local render, syntax, or artifact verification.
- Collapsing this workflow into a broader frontend/design skill when Stitch-specific files, project IDs, or design-system assets matter.
## Verification Protocol
Before claiming this skill was applied successfully:
1. Pass/fail: Every component has typed props or an explicit reason it has no props.
2. Pass/fail: Static content is separated from component structure.
3. Pass/fail: Generated project code does not carry irrelevant upstream license headers.
4. Pass/fail: The rendered app was checked locally or the blocker is documented.
5. Pressure-test scenario: Repeat the workflow with Stitch MCP screen tools unavailable and confirm the fallback path remains honest and actionable.
6. Success metric: The user can identify the exact artifact, project/design-system target, and verification evidence without relying on unstated MCP behavior.
## Related Skills
- [react-development](../react-development/SKILL.md): Use when the task also needs this adjacent Stitch workflow.
- [frontend-design](../frontend-design/SKILL.md): Use when the task also needs this adjacent Stitch workflow.
- [stitch-extract-static-html](../stitch-extract-static-html/SKILL.md): Use when the task also needs this adjacent Stitch workflow.
- [stitch-shadcn-ui](../stitch-shadcn-ui/SKILL.md): Use when the task also needs this adjacent Stitch workflow.