react:components — install react:components react:components, stitch-skills, official, install react:components, ide skills, react:components and Vite integration, react:components AST-based validation, react:components system-level networking, Claude Code, Cursor, Windsurf

Verified
v1.0.0
GitHub

About this Skill

Perfect for Frontend Agents needing automated React component generation from Stitch designs. react:components is a skill that leverages system-level networking and AST-based validation to generate modular Vite and React components from Stitch designs.

Features

Namespace discovery via `list_tools` command
Metadata fetch using `[prefix]:get_screen` call
AST-based validation for ensuring code quality
Modular component generation using Vite and React
System-level networking for efficient design retrieval
Automated checks for existing designs before download

# Core Topics

install react:components react:components and Vite integration react:components AST-based validation react:components system-level networking
google-labs-code google-labs-code
[2.2k]
[256]
Updated: 3/6/2026

Agent Capability Analysis

The react:components skill by google-labs-code is an open-source official AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for install react:components, react:components and Vite integration, react:components AST-based validation.

Ideal Agent Persona

Perfect for Frontend Agents needing automated React component generation from Stitch designs.

Core Value

Empowers agents to convert Stitch designs into modular Vite and React components using system-level networking and AST-based validation, leveraging protocols like namespace discovery and metadata fetch via calls such as `list_tools` and `[prefix]:get_screen`.

↓ Capabilities Granted for react:components

Converting Stitch designs into modular React components
Validating React code quality using AST-based validation
Automating the retrieval of design JSON metadata

! Prerequisites & Limits

  • Requires knowledge of Stitch MCP prefix
  • Dependent on Vite and React ecosystems
  • Needs system-level networking capabilities
Labs Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

react:components

Install react:components, an AI agent skill for AI agent workflows and automation. Works with Claude Code, Cursor, and Windsurf with one-command setup.

SKILL.md
Readonly

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

  1. Namespace discovery: Run list_tools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls.
  2. Metadata fetch: Call [prefix]:get_screen to retrieve the design JSON.
  3. 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.
  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.
  5. 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

  1. Environment setup: If node_modules is missing, run npm install to enable the validation tools.
  2. Data layer: Create src/data/mockData.ts based on the design content.
  3. 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.
  4. Application wiring: Update the project entry point (like App.tsx) to render the new components.
  5. 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.

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is react:components?

Perfect for Frontend Agents needing automated React component generation from Stitch designs. react:components is a skill that leverages system-level networking and AST-based validation to generate modular Vite and React components from Stitch designs.

How do I install react:components?

Run the command: npx killer-skills add google-labs-code/stitch-skills/react-components. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for react:components?

Key use cases include: Converting Stitch designs into modular React components, Validating React code quality using AST-based validation, Automating the retrieval of design JSON metadata.

Which IDEs are compatible with react:components?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for react:components?

Requires knowledge of Stitch MCP prefix. Dependent on Vite and React ecosystems. Needs system-level networking capabilities.

↓ How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add google-labs-code/stitch-skills/react-components. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use react:components immediately in the current project.

Related Skills

Looking for an alternative to react:components or another official skill for your workflow? Explore these related open-source skills.

View All

flags

Logo of facebook
facebook

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.

★ 243.6k
⑂ 0
Developer

extract-errors

Logo of facebook
facebook

Use when adding new error messages to React, or seeing unknown error code warnings.

★ 243.6k
⑂ 0
Developer

fix

Logo of facebook
facebook

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

★ 243.6k
⑂ 0
Developer

flow

Logo of facebook
facebook

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

★ 243.6k
⑂ 0
Developer

Related Collections

View All Collections →
■12 Official AI Skills & Trusted Tools | AI Agent Skills[12]