Agent skill · software engineering · google-labs-code
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.
Why this skill is useful
Adds a comprehensive Bash script for downloading and validating Stitch designs, which automates a complex workflow not covered in public documentation.
What it needs
Requires bash installed locally. About 5k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
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. 1. Namespace discovery: Run listtools to find the Stitch MCP prefix. Use this prefix (e.g., stitch:) for all subsequent calls. 2. Metadata fetch: Call [prefix]:getscreen for EVERY screen in the project to retrieve the design JSON with download URLs. Do NOT skip any screen. 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. You MUST ask — do not assume. 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. You MUST use the provided script. 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills google-labs-code/react-components