react:components

Name: react:components - Agent Skill
Rating: 3.2 (97 reviews)
Author: google-labs-code

Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.

Download Folder View on GitHub

CLI Install

Recommended

Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.

Method 1 - skills CLI

npx skills i google-labs-code/stitch-skills/skills/react-components

Method 2 - openskills (supports sync & update)

npx openskills install google-labs-code/stitch-skills

Auto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.

Installation Path

Download and extract to one of the following locations:

~/.claude/skills/react:components/

SKILL.md

examples

resources

scripts

package-lock.json

package.json

Skill Instructions

Back

Run with Cloud Agent

No setup needed. Let our cloud agents run this skill for you.

Select Provider

Select Model

Claude Sonnet 4.5

$0.20/task

Best for coding tasks

Environment setup included

Stitch to React Components

You are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.

Retrieval and networking

Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- Use the Bash tool to run: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.html".
- This script handles the necessary redirects and security handshakes.
Visual audit: Check screenshot.downloadUrl to confirm the design intent and layout details.

Architectural rules

Modular components: Break the design into independent files. Avoid large, single-file outputs.
Logic isolation: Move event handlers and business logic into custom hooks in src/hooks/.
Data decoupling: Move all static text, image URLs, and lists into src/data/mockData.ts.
Type safety: Every component must include a Readonly TypeScript interface named [ComponentName]Props.
Project specific: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.
Style mapping:
- Extract the tailwind.config from the HTML <head>.
- Sync these values with resources/style-guide.json.
- Use theme-mapped Tailwind classes instead of arbitrary hex codes.

Execution steps

Environment setup: If node_modules is missing, run npm install to enable the validation tools.
Data layer: Create src/data/mockData.ts based on the design content.
Component drafting: Use resources/component-template.tsx as a base. Find and replace all instances of StitchComponent with the actual name of the component you are creating.
Application wiring: Update the project entry point (like App.tsx) to render the new components.
Quality check:
- Run npm run validate <file_path> for each component.
- Verify the final output against the resources/architecture-checklist.md.
- Start the dev server with npm run dev to verify the live result.

Troubleshooting

Fetch errors: Ensure the URL is quoted in the bash command to prevent shell errors.
Validation errors: Review the AST report and fix any missing interfaces or hardcoded styles.