Stitch React Components Skill: Stitch Designs to React

What is the stitch react:components skill?

The react:components skill, named stitch::react-components in its frontmatter, converts Google Stitch designs into a Vite and React project, or syncs components that already exist. It is part of the stitch-build plugin.

It works in four phases: retrieval, style extraction, architecture and execution. The goal is modular code rather than one large page, with each component getting its own file.

What changes in your agent's output

• Retrieval calls get_screen for every screen, downloads the files with scripts/fetch-stitch.sh and records a Last Sync Time in .stitch/metadata.json.
• Style tokens are lifted from the Tailwind config in the HTML head into resources/style-guide.json.
• Components go in src/components/, hooks in src/hooks/ and static content in src/data/mockData.ts, each with a Readonly props interface.
• Placeholder links become React Router <Link> elements, and dark: variants follow the theme.

Who the stitch react:components skill is for

Best for

• Turning Stitch prototypes into a real React front end.
• Re-syncing components when a design changes.
• Teams that want typed, modular output instead of a single HTML dump.

Not for

• WordPress output. The skill produces React code, not WordPress pages.
• Designs that did not come from Stitch.
• Choosing components. stitch shadcn-ui helps align the result with shadcn/ui.

Use it with UiChemy

This skill ends in React code. If the goal is a WordPress site, UiChemy is the route: AI to WordPress imports an existing AI build, with Lovable to Elementor as a worked example, and Composer edits the result. Click Get Started on uichemy.com.

How to install Stitch React Components Skill: Stitch Designs to React

git clone https://github.com/google-labs-code/stitch-skills.git

1. Set up the Stitch MCP server

   These skills assume the Stitch MCP server is configured in your agent. Follow the Stitch MCP setup docs first.

2. Clone the repository

   Run git clone https://github.com/google-labs-code/stitch-skills.git. This skill is at plugins/stitch-build/skills/react-components.

3. Copy the skill folder

   Copy that folder into your agent's skills folder with every file in it. The project's own plugin installer, npx plugins add google-labs-code/stitch-skills, is the alternative and installs the whole collection.

4. Invoke it

   Ask your agent to convert a named Stitch project's screens into React components with the react:components skill, in a Vite and React project.

Check that it loaded

Run it on one Stitch screen. You should see files in src/components, a mockData file, Readonly props on each component and a metadata file with a sync time. Run npx tsc --noEmit to confirm the output compiles.

Read the official instructions on GitHub

Key features

• Retrieval phaseIt gets every screen with get_screen, downloads files with a fetch script and audits them visually.
• Sync tracking.stitch/metadata.json stores a Last Sync Time so later runs know what changed.
• Style extractionTokens move from the HTML head Tailwind config into a style-guide JSON file.
• Modular architectureComponents, hooks and mock data each have their own folder and file.
• Typed propsEvery component gets a Readonly [Name]Props interface.
• Router linksPlaceholder href="#" values are replaced with React Router links.
• Theme-mapped classesTailwind classes map to the extracted theme, with dark: variants.
• Validation stepAn optional AST validator and a tsc --noEmit check run before the work is called done.
• Permission gateThe agent asks before it starts a dev server or runs browser audits.
• Resources and exampleAn architecture checklist, a component template, an API reference and a gold-standard card example are included.

Frequently asked questions