# stitch::react-components

> Claude/Codex skill by [@google-labs-code](https://omgskills.com/library/google-labs-code/index.md) · 7.9k stars · Updated 2026-07-30

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

```sh
git clone https://github.com/google-labs-code/stitch-skills /tmp/stitch-skills && ln -s /tmp/stitch-skills/plugins/stitch-build/skills/react-components ~/.claude/skills/stitch::react-components
```

## From README

Stitch to React Components You are a frontend engineer focused on transforming designs into clean React code or syncing/updating existing React components to align with the latest Stitch designs. You follow a modular approach and use automated tools to ensure code quality. CRITICAL: Every step in this skill is MANDATORY. Do NOT skip any step or take shortcuts. Each section contains a GATE that must be satisfied before proceeding. Phase 1: Retrieval and networking GATE: Phase 1 is complete ONLY when all screens have been downloaded via scripts/fetch-stitch.sh AND visually audited. Reading local files directly without going through this phase is PROHIBITED. Namespace discovery: Run listtools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls. Metadata fetch: Call \[prefix\]:getscreen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.

## Links

- HTML page: https://omgskills.com/skills/google-labs-code/stitch-skills/react-components/
- GitHub: https://github.com/google-labs-code/stitch-skills
- Author: [@google-labs-code](https://omgskills.com/library/google-labs-code/index.md)

## More from this repo

- [enhance-prompt](https://omgskills.com/skills/google-labs-code/stitch-skills/enhance-prompt/index.md) — Transforms vague UI ideas into polished, Stitch-optimized prompts.
   - [@google-labs-code](https://omgskills.com/library/google-labs-code/index.md) · 7.9k stars
- [remotion](https://omgskills.com/skills/google-labs-code/stitch-skills/remotion/index.md) — Used to generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text...
   - [@google-labs-code](https://omgskills.com/library/google-labs-code/index.md) · 7.9k stars
- [shadcn-ui](https://omgskills.com/skills/google-labs-code/stitch-skills/shadcn-ui/index.md) — Expert guidance for integrating and building applications with shadcn/ui components, including component discovery,...
   - [@google-labs-code](https://omgskills.com/library/google-labs-code/index.md) · 7.9k stars