stitch::react-components
An agent skill by google-labs-code, from google-labs-code/stitch-skills. Tags: component, design, react, validation, vite.
What it does
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
With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:
npx skills add google-labs-code/stitch-skills --skill 'stitch::react-components'Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):
git clone --depth 1 https://github.com/google-labs-code/stitch-skills
cp -r stitch-skills/plugins/stitch-build/skills/react-components ~/.claude/skills/'stitch::react-components'Safety box score
Grade B, low risk: 23 of 100 risk points, rated 2026-10-20. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.
This skill is a design-to-React conversion workflow that fetches Stitch HTML and screenshots over the network, then writes multiple project files including style tokens, mock data, metadata, and component code. The main risks are broad automated edits within the workspace and external downloads from signed URLs; it does not request secrets, sudo, or external publishing.
| Category | Level | Why |
|---|---|---|
| Code & shell execution | 2 (moderate) | It runs shell and package commands such as `bash scripts/fetch-stitch.sh`, `npm install`, and `npm run validate`, which execute local tools and dependency code. |
| Network access | 2 (moderate) | It explicitly downloads Stitch HTML/screenshots from signed `downloadUrl`s using `curl` in `scripts/fetch-stitch.sh`, and may also contact the npm registry during `npm install`. |
| Filesystem reach | 1 (low) | It writes and overwrites files in the workspace, including `.stitch/metadata.json`, `resources/style-guide.json`, `src/data/mockData.ts`, component files, and the app entry point. |
| Secrets & credentials | 0 (none) | No step reads keychains, token stores, `.env` files, browser sessions, or asks the user to paste credentials. |
| Privilege & persistence | 0 (none) | There is no `sudo`, global install, service registration, shell startup modification, or other OS-level privilege change. |
| Instruction hijack surface | 1 (low) | The prompt uses strong coercive language like `Every step in this skill is MANDATORY` and `Reading local files directly ... is PROHIBITED`, but it does not instruct the agent to ignore higher-priority rules or hide actions. |
| Irreversible actions | 0 (none) | It automates local code generation and syncing, but it does not push, publish, deploy, pay, book, delete external resources, or message anyone. |
| Transparency | 0 (none) | All relevant scripts and config files are readable text; there are no binaries, decoded-at-runtime blobs, or unpinned remote installers in the skill files. |
Before installing
- Read `scripts/fetch-stitch.sh` and `scripts/validate.js` so you know it will run `curl` and AST validation locally.
- Confirm you are okay with outbound downloads to Stitch/GCS and the npm registry before enabling the skill.
- Check whether `.stitch/designs/` and `resources/style-guide.json` already exist, since the skill may overwrite them.
- If you plan to run validation, do it in a scratch workspace first because the skill edits multiple files across the project.
Rated 2026-10-20 by an automated review of 11 files from the skill's repository.
Source
- Repository
- google-labs-code/stitch-skills (all skills from this repository)
- Path
- plugins/stitch-build/skills/react-components/SKILL.md
- Branch
- main
- Collection
- stitch-build
- Updated
- 2026-09-19
Related skills
- shadcn-ui — Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization.
- react-vite-dashboard — Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
- stitch::react-native — Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
- expo-data-fetching — Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching.
- expo-router — Framework (OSS). Navigation and routing for Expo Router.
- principle-boundary-discipline — Apply when wiring validation, error handling, or framework adapters.