Stitch::react Components
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
Install
npx skills add google-labs-code/stitch-skills --skill stitch::react-componentsgit clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills
mkdir -p ~/.claude/skills
cp -r /tmp/stitch-skills/plugins/stitch-build/skills/react-components ~/.claude/skills/stitch-react-componentsPersonal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.
From the SKILL.md
# Stitch to React Components
You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality.
> **CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding.**
## Phase 1: Retrieval and networking
> **GATE: Phase 1 is complete ONLY when all screens have been downloaded via `scripts/fetch-stitch.sh` AND visually audited. Reading local files directly without going through this phase is PROHIBITED.**
1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
2. **Metadata fetch**: Call `[prefix]:get_screen` for **EVERY screen** in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
3. **Check for existing designs**: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:
- **If files exist**: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. **You MUST ask — do not assume.** Only re-download if the user confirms.
- **If files do not exist**: Proceed to step 4.Details
- Skill name
stitch::react-components- Repository
- google-labs-code/stitch-skills
- Path
plugins/stitch-build/skills/react-components/SKILL.md- License
- Apache-2.0
- Repo updated
- 17 August 2026
- Listed in
- heilcheng/awesome-agent-skills
FAQ
What does the Stitch::react Components skill do?
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
How do I install the Stitch::react Components skill?
skills CLI (Claude Code, Cursor, Codex and more): npx skills add google-labs-code/stitch-skills --skill stitch::react-components. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.
Is Stitch::react Components popular?
It lives in google-labs-code/stitch-skills, which has 8,644 GitHub stars and 1,049 forks, and is included in 1 curated skill list.
Related skills
Design Md
8.6kgoogle-labs-code/stitch-skills
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Enhance Prompt
8.6kgoogle-labs-code/stitch-skills
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.
Shadcn UI
8.6kgoogle-labs-code/stitch-skills
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
Star Office UI
7.5kringhyacinth/Star-Office-UI
Star Office UI 一键化 Skill:帮主人快速部署像素办公室看板,支持多 Agent 加入、状态可视化、移动端查看与公网访问。
Lean UX Canvas
7.8kdeanpeters/Product-Manager-Skills
Guide teams through Lean UX Canvas v2. Use when framing a business problem, surfacing assumptions, and defining what to learn next.
Problem Framing Canvas
7.8kdeanpeters/Product-Manager-Skills
Guide teams through MITRE's Problem Framing Canvas. Use when you need a clearer problem statement before jumping to solutions.
Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.