How to use the Stitch to React Components agent skill

What the skill makes the agent do

An agent skill is a folder of instructions and helper files that an AI agent loads when your request matches the skill's purpose. This one covers design-to-code work for Stitch projects. The agent downloads each screen's HTML and screenshot, reads color and typography tokens from the design, and builds components from them.

The skill applies a set of structural rules. UI is split into reusable components in src/components/, event handlers and business logic move into hooks in src/hooks/, and static text, image URLs and lists go into src/data/mockData.ts. Each component file must include a Readonly Props interface. Links that Stitch leaves as href='#' are converted to React Router Link components, and the logo in the top app bar links back to the home page.

• Downloads each screen's HTML and screenshot into a .stitch/designs folder
• Extracts tailwind.config tokens (colors, fonts, spacing, radius, type sizes) into resources/style-guide.json
• Creates modular components, hooks and a data file in a Vite and React project
• Wires navigation with React Router and adds dark: variants to color classes
• Can update existing React components to match a newer Stitch design

How to install the skill

Download the skill ZIP from this page. Unzip it into one of two places. For a personal install available to all your projects, use ~/.claude/skills/. For a single project, put it in that project's .claude/skills/ folder. Each skill should sit in its own folder inside the skills directory.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

The skill's README also gives an install command using the npx skills tool. It is listed there with the --global flag and the skill name react:components, which differs slightly from the stitch::react-components name in SKILL.md. Use whichever method you are comfortable with, then check that the skill appears in your agent's skill list.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

What you need before you start

The skill depends on several tools. Without the Stitch MCP server, the agent cannot read your project, so this is the first thing to set up. The source lists the MCP tools the skill uses: list_tools, get_screen and get_project. It does not say how to obtain or connect the server, so check Stitch's own documentation for that.

The rest of the requirements are local: Node.js and npm for the validation tools, bash and curl for the download script, and a few npm dependencies such as @swc/core used by the validator. The skill's allowed tools include Bash, Read, Write and web_fetch, along with Stitch MCP tools.

• Stitch MCP server connected to your agent (list_tools, get_screen, get_project)
• Node.js and npm
• bash and curl
• npm dependencies from package.json, including @swc/core for scripts/validate.js
• A Stitch project with the screens you want converted

How to trigger the skill with a natural request

You do not need special syntax. Describe the screen or project in plain words and name the Stitch project if you have more than one. The skill's README gives this example prompt, which names a specific screen and project:

Other requests that fit the skill's purpose include asking the agent to update existing React components so they match the latest Stitch design, or to sync a project's components after the design changed. Be specific about which screens or components to cover.

How the workflow runs, step by step

The skill works in phases, and each phase has a gate that must be met before the next one starts. In the retrieval phase, the agent lists tools, calls get_screen for every screen, and checks whether local designs already exist. If they do, the agent must ask you whether to refresh from Stitch or reuse the local files. It only re-downloads after you confirm.

The style phase overwrites resources/style-guide.json with tokens from the current project. The build phase creates components, hooks and data files. Running validation, tsc --noEmit, the dev server and browser audits is optional, and the skill says the agent must ask your permission before running any of them.

• Phase 1: fetch screens and metadata; save .stitch/metadata.json
• Phase 2: extract tokens into resources/style-guide.json
• Phase 3: apply architecture rules (components, hooks, data, Props, navigation, dark mode)
• Phase 4: wire the app, then validate only with your approval

Safety notes: scripts and network access

This skill runs shell scripts and fetches files from the internet. The skill's listing says it runs scripts and uses the network. The download step runs scripts/fetch-stitch.sh, which uses curl to fetch signed Google Cloud Storage URLs. The validator, scripts/validate.js, is run through npm.

Because of this, review the agent's commands and the generated files before you accept them. The skill's own assessment says a person should check changes, and it is not suited to running unattended. Also note that the skill fetches from Stitch download URLs, so it will not work on projects that do not use Stitch.

• Read each shell command the agent proposes before approving it
• Review scripts/fetch-stitch.sh and scripts/validate.js if you want to know exactly what runs
• Check generated components and mockData.ts for unexpected content before committing

Tips for better results

The skill is strict. It expects a Stitch screen with a clear structure and will enforce its own rules even where your project may prefer different patterns. If your team has its own conventions, decide early whether you will adapt the output afterwards.

The source references resources/component-template.tsx, but that file is not in the file list for this skill. If the agent reports it missing, the component template step may not be available as described. Keep the Stitch project's screen names consistent, since the skill uses them to name pages and routes.

• Use a DESKTOP-type Stitch project if you want the 2560px base layout the reference describes
• Keep the metadata file and style guide in version control so you can see what changed on each sync
• Ask the agent to explain any Phase 2 token changes before you accept them