Tooluck logoTooluck
SKILL.md

stitch::react-native

Agent skill fromgoogle-labs-code/stitch-skills

Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.

How to install stitch::react-native

install stitch::react-native
# install the stitch-skills pack with the skills CLI
npx skills add google-labs-code/stitch-skills

# or add only this skill to Claude Code: copy the folder

plugins/stitch-build/skills/react-native/

# into

~/.claude/skills/react-native/ (all projects)

.claude/skills/react-native/ (one project)

plugins/stitch-build/skills/react-native/SKILL.md

Apache-2.0Full file
1# Stitch to React Native Components
2
3You 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`.
4
5> **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.**
6
7## Phase 1: Retrieval and networking
8
9> **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.**
10
111. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.
122. **Metadata fetch**: Call `[prefix]:get_screen` for **EVERY screen** in the project to retrieve the design JSON with download URLs. Do NOT skip any screen.
133. **Check for existing designs**: Before downloading, check if `.stitch/designs/{page}.html` and `.stitch/designs/{page}.png` already exist:
14 - **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.
15 - **If files do not exist**: Proceed to step 4.
16…

Excerpt shown under the repository's Apache-2.0 license.

More skills in stitch-skills

Keep exploring

Similar skill repositories

thedotmack /

claude-mem
116k

Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More

CCCXGHGM+135 skills

Newsletter

Join the Community

Subscribe to our newsletter for the latest news and updates