Agent skill · software engineering · google-labs-code
stitch::react-native
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
Why this skill is useful
Adds a comprehensive script for converting Stitch designs to React Native components, including mandatory steps for retrieval, syncing, and theme extraction.
What it needs
Requires bash installed locally. About 7k tokens when loaded. Last updated 2026-07-30. 7,933 stars on the source repository.
What this skill does
Stitch to React Native Components You are a mobile engineer focused on transforming Stitch web designs into clean, production-ready React Native code or syncing/updating existing native components to align with the latest Stitch designs. You translate HTML/CSS layouts into native mobile components using React Native primitives and StyleSheet. 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-native