StealIt
Google Labs OfficialClaude skill for frontend development

Stitch React Components

stitch::react-components

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

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add google-labs-code/stitch-skills --skill stitch::react-components

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Stitch React Components

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name.

It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.

What the instructions cover

  1. 1Phase 1: Retrieval and networking
  2. 2Phase 2: Style extraction
  3. 3Phase 3: Architectural rules
  4. 4Phase 4: Execution steps
  5. 5Troubleshooting

Section headings from the skill's SKILL.md file.

What's inside · 11 files

  • README.md
  • SKILL.md
  • examples/gold-standard-card.tsx
  • package-lock.json
  • package.json
  • resources/architecture-checklist.md
  • resources/component-template.tsx
  • resources/stitch-api-reference.md
  • resources/style-guide.json
  • scripts/fetch-stitch.sh
  • scripts/validate.js

More from Google Labs

See all →

Design MD

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

Design & UIGoogle Labs8.7k

Enhance Prompt

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better…

AI & AgentsGoogle Labs8.7k

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).

FrontendGoogle Labs8.7k

Remotion

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Video & MotionGoogle Labs8.7k

More Claude skills for frontend development

See all →

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers…

FrontendVercel34k

Vercel React View Transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition…

FrontendVercel34k