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.

8,644 stars 1,049 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add google-labs-code/stitch-skills --skill stitch::react-components
Manual install
git 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-components

Personal 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.
Read the full skill on GitHub

Details

Skill name
stitch::react-components
Path
plugins/stitch-build/skills/react-components/SKILL.md
License
Apache-2.0
Repo updated
17 August 2026

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

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.