98.8K+Download
Skip to the usage guide
stitch::react-componentsby Google Labs

Stitch React Components Skill.

A Claude Code and Codex skill for UI design: converts or syncs Stitch designs to modular React + Vite components.

  • Web & UI
  • UI code
Download OpenDesignView usage guide
google-labs-code/stitch-skills · plugins/stitch-build/skills/react-components/SKILL.mdSKILL.md
--- name: stitch::react-components description: - 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. --- ## Phase 1: Retrieval and networking ## Phase 2: Style extraction ## Phase 3: Architectural rules ## Phase 4: Execution steps
Front matter and section headings read from the upstream file on 2026-09-14 · 8,725 characters in full

01 What it does

What the stitch::react-components Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill turns a Stitch project into a modular React and Vite front end, or syncs existing React components to the latest Stitch designs. It is for frontend engineers working from Stitch screens: the agent finds the Stitch MCP prefix with list_tools, pulls every screen with get_screen, downloads HTML and screenshots through scripts/fetch-stitch.sh, extracts tailwind.config tokens into resources/style-guide.json, then builds components, hooks and mock data that AST validation checks.

Four gated phases enforce that order, and npm run validate enforces Readonly Props interfaces, theme tokens instead of hex values, and no monolithic page files.

What it produces

  • Downloaded design assets at .stitch/designs/{page}.html and .stitch/designs/{page}.png for each screen.
  • A .stitch/metadata.json holding projectId, title, deviceType, a screens map and a Last Sync Time field.
  • An overwritten resources/style-guide.json carrying the current project's colour, font, spacing, radius and typography tokens.
  • React components in src/components, hooks in src/hooks, mock data in src/data/mockData.ts, and an updated entry point rendering them.
See the example prompt ↗

How It Works

  1. 01
    Find the Stitch Namespace

    Run list_tools to discover the MCP prefix, then reuse that prefix for every later Stitch call.

  2. 02
    Pull Metadata for Every Screen

    Call get_screen for each screen in the project to get the design JSON and its download URLs, with no screens skipped.

  3. 03
    Download Through the Script

    Internal fetch tools can fail against Google Cloud Storage, so downloads go through the provided bash script that handles redirects and security handshakes.

  4. 04
    Extract Design Tokens

    Open each downloaded HTML file and read the tailwind.config object in the head script block for colours, fonts, spacing, radius and typography.

  5. 05
    Draft Components from the Template

    Use the shipped component template as a base and rename every instance of the placeholder component name before wiring the entry point.

02 Find your fit

When to Use the stitch::react-components Skill

Use the stitch::react-components skill in Claude Code or Codex when the job is UI design of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • You have Stitch designs and want clean, modular React code rather than one large converted page.
  • You already have React components and need them realigned with the newest Stitch designs.
  • You are assembling a multi-page app where each Stitch screen is a standalone page with placeholder links that need real routes and working navigation.
  • You want automated quality gates over the generated code instead of eyeballing it.

Know the Boundaries

  • It cannot be run partially. The skill states every step is mandatory and each section holds a gate that must be satisfied before moving on.
  • You cannot hand it already-downloaded design HTML and skip the MCP retrieval phase.
  • It will not start the dev server or run browser audits on its own initiative.
  • Generated components should not carry Google license headers.

What to Provide

  • A decision on existing local design filesIf .stitch/designs/{page}.html and .png are already present, you are asked whether to re-download or reuse them, and the skill will not assume.
  • Permission for verification stepsYou are asked before npm run dev starts or a visual browser audit begins.
  • The target project's own constraintsComponent decisions should follow the needs of the specific project being built rather than a generic layout.

03 Inside the skill

Rules the stitch::react-components Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Every Component Needs a Props Interface

    Each component file, pages included, must declare a Readonly TypeScript interface named after the component. The validator fails files that lack one.

  2. No Monolithic Page Files

    Reusable UI patterns such as cards, badges, pagination and search bars each get their own file under src/components; single files holding the whole page are banned.

  3. Logic Lives in Hooks

    Event handlers and business logic move into custom hooks under src/hooks, for example pagination into usePagination and filtering into useFilter.

  4. No Hardcoded Content

    All static text, image URLs and lists belong in src/data/mockData.ts rather than inside component files.

  5. Convert Placeholder Hrefs to Routes

    Stitch screens ship with href="#" links, and every one of them must become a React Router Link pointing at the correct route.

  6. Make the Logo a Home Link

    The TopAppBar logo or title must be a Link to root, because Stitch bottom nav bars use md:hidden and are invisible on desktop.

  7. Theme Tokens and Dark Mode on Everything

    Colour classes come from the synced style guide rather than arbitrary hex codes, and every colour class also carries a dark: variant.

  8. Ask Before Running Anything

    Validation scripts, the dev server and automated browser audits only run once the user has given permission.

04 Put it to work

Install stitch::react-components in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add stitch::react-components to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-components

Generic skills CLI form for plugins/stitch-build/skills/react-components/SKILL.md; the repository may document its own path.

Give the Skill a First UI Design Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Convert the screens in my Stitch project [project name] into a modular React + Vite app. Use scripts/fetch-stitch.sh to download every screen, sync the Tailwind tokens into resources/style-guide.json, then split the layout into components under src/components with logic in src/hooks and content in src/data/mockData.ts. Wire all the href="#" navigation links to React Router routes with dark mode variants, and ask me before running validation or the dev server.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Run the AST validator on every .tsx file in src/components and src/pages to report component validity.
  • Run tsc --noEmit to confirm the TypeScript compiles before calling the work done.
  • Compare the output against the shipped architecture checklist.
  • View each downloaded screenshot to confirm design intent and layout details rather than assuming.
  • After re-extracting tokens, confirm the primary colour, fonts and spacing in the style guide match what you pulled from the HTML.
  • Click through the navigation and make sure every nav item leads to the right page.

In OpenDesign import stitch::react-components from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill file
plugins/stitch-build/skills/react-components/SKILL.md Content checksum recorded at verification; commit 0337446
License
Apache-2.0 From LICENSE.
Repository stars
8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for stitch::react-components.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Phase 1: Retrieval and networkingDiscover the MCP prefix, fetch every screen, download via script, audit screenshots, write metadata.
  2. Phase 2: Style extractionPull tailwind.config tokens from the current HTML head and overwrite the shared style guide.
  3. Phase 3: Architectural rulesModular files, hooks, mock data, Props interfaces, theme tokens, routing and dark mode.
  4. Phase 4: Execution stepsInstall, build the data layer, draft from the template, wire the app, then optional user-approved validation.
  5. TroubleshootingFixes for fetch errors, validation failures, dead navigation links and stale style guides.
The Skill's Own Description
“- 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.”

Front-matter description from SKILL.md. The full file is about 8,725 characters. Read the full file on GitHub.

06 Before you install

Questions About the stitch::react-components Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

I already downloaded these designs once. Will it overwrite them?

No. When .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist it asks whether to refresh from the Stitch project or reuse the local files, and it only re-downloads after you confirm.

Stitch React Components

Run stitch::react-components on a Real UI Design Task.

Download OpenDesign, import stitch::react-components from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::react-components

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows