react:components

google-labs-code/stitch-skills

Convert Stitch designs into modular React components with AST validation and Vite integration.

What is react:components?

Transforms Stitch design files into clean, type-safe React components organized by modular architecture. Use this when you need to convert design mockups into production-ready frontend code with automated validation and style consistency.

Fetches design metadata and assets from Stitch projects via MCP networking
Downloads HTML and screenshot files with reliable Google Cloud Storage handling
Generates modular React components with TypeScript interfaces and Tailwind styling
Extracts and syncs Tailwind configuration from design files into project theme
Validates component code using AST-based checks and architecture rules
Integrates new components into Vite dev server for live preview

How to install react:components

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

Prerequisites

Node.js and npm installed
Stitch MCP server configured and accessible
Vite project with React and TypeScript setup
Tailwind CSS configured in the project

Claude Code

Cursor

Windsurf

Cline

How to use react:components

1.Run `list_tools` to discover the Stitch MCP namespace prefix
2.Call `[prefix]:get_screen` to retrieve design metadata and download URLs
3.Confirm whether to fetch fresh designs or reuse existing `.stitch/designs/` files
4.Run `npm install` if `node_modules` is missing to enable validation tools
5.Create `src/data/mockData.ts` with static content extracted from the design
6.Use `resources/component-template.tsx` as a base and generate modular components
7.Update `App.tsx` or entry point to import and render the new components
8.Run `npm run validate <file_path>` on each generated component to verify AST compliance

Use cases

Good for

Converting UI mockups from Stitch into a React component library
Ensuring design-to-code consistency across multiple pages and screens
Automating style mapping from design tokens to Tailwind theme values
Setting up modular component structure with hooks and mock data separation
Validating generated components against project architecture standards

Who it's for

Frontend engineers building React applications from design files
Design systems teams converting Stitch mockups to reusable components
Teams using Vite as their build tool and Tailwind for styling
Developers who want automated validation of generated component code

react:components FAQ

How does the skill handle design file downloads?

It uses a bash script (`scripts/fetch-stitch.sh`) that handles Google Cloud Storage redirects and security handshakes. HTML and screenshot URLs are fetched with proper width parameters appended to ensure full-resolution assets.

What if design files already exist locally?

The skill checks for existing `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` files and asks whether to refresh from Stitch or reuse the local copies, avoiding unnecessary re-downloads.

How are styles handled in generated components?

The skill extracts Tailwind configuration from the design HTML `<head>`, syncs it with `resources/style-guide.json`, and uses theme-mapped Tailwind classes instead of hardcoded hex codes.

What validation does the skill perform?

It runs AST-based validation via `npm run validate` to check for missing TypeScript interfaces, hardcoded styles, and adherence to the architecture checklist before deploying.

Can I customize the component structure?

Yes. The skill uses `resources/component-template.tsx` as a base template and follows modular patterns: components in separate files, hooks in `src/hooks/`, and mock data in `src/data/mockData.ts`.

Full instructions (SKILL.md)

Source of truth, from google-labs-code/stitch-skills.

name: react:components description: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation. allowed-tools:

"stitch*:*"
"Bash"
"Read"
"Write"
"web_fetch"

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.
Check for existing designs: Before downloading, check if .stitch/designs/{page}.html and .stitch/designs/{page}.png already exist:
- If files exist: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.
- If files do not exist: Proceed to step 4.
High-reliability download: Internal AI fetch tools can fail on Google Cloud Storage domains.
- HTML: bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"
- Screenshot: Append =w{width} to the screenshot URL first, where {width} is the width value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: bash scripts/fetch-stitch.sh "[screenshot.downloadUrl]=w{width}" ".stitch/designs/{page}.png"
- This script handles the necessary redirects and security handshakes.
Visual audit: Review the downloaded screenshot (.stitch/designs/{page}.png) to confirm 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.