react-native
starsforks
How to install react-native?
google-labs-code/stitch-skills/react-native
$npx -y skills add google-labs-code/stitch-skills --skill react-nativeConvert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
SKILL.md
| 1 | # Stitch to React Native Components |
| 2 | |
| 3 | 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`. |
| 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 | |
| 11 | 1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls. |
| 12 | 2. **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. |
| 13 | 3. **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 | 4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains. You MUST use the provided script. |
| 17 | - **HTML**: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" ".stitch/designs/{page}.html"` |
| 18 | - **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"` |
| 19 | - This script handles the necessary redirects and security handshakes. |
| 20 | 5. **Visual audit**: Review the downloaded screenshot (`.stitch/designs/{page}.png`) to confirm design intent and layout details. **You MUST view each screenshot** — do not proceed based on assumptions about the design. |
| 21 | 6. **Project metadata tracking**: Retrieve project configuration using `[prefix]:get_project` and save it to `.stitch/metadata.json` (inside the app folder, and mirrored in the workspace root). Ensure it has: |
| 22 | - `projectId`, `title`, `deviceType` |
| 23 | - A `Last Sync Time` field matching the current sync ISO execution time |
| 24 | - A `screens` map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition. |
| 25 | |
| 26 | ### Anti-patterns for Phase 1 |
| 27 | - ❌ Reading `.stitch/designs/*.html` directly without calling MCP `get_screen` first. |
| 28 | - ❌ Skipping the `fetch-stitch.sh` download script. |
| 29 | - ❌ Not asking the user when existing files are found. |
| 30 | - ❌ Skipping the visual audit of `.png` screenshots. |
| 31 | - ❌ Failing to generate or update `.stitch/metadata.json` and its `Last Sync Time` field upon syncing. |
| 32 | |
| 33 | ## Phase 2: Theme extraction |
| 34 | |
| 35 | > **GATE: Phase 2 is complete ONLY when `src/theme.ts` has been created or updated with tokens extracted from the current project's HTML `<head>`. Hardcoding color hex codes or using themes from a different project is NOT acceptable.** |
| 36 | |
| 37 | 1. **Extract `tailwind.config`**: Open each downloaded HTML file and locate the `tailwind.config` object in the `<head>` `<script>` block. Extract: |
| 38 | - All color tokens |
| 39 | - Font families |
| 40 | - Spacing values |
| 41 | - Border radius values |
| 42 | - Font size/typography tokens |
| 43 | 2. **Create/Sync `src/theme.ts`**: Write the extracted tokens to `src/theme.ts` as TypeScript constants. Ensure every color, spacing, and typography value has a corresponding token. |
| 44 | 3. **Verify theme**: Confirm the theme colors and fonts in `src/theme.ts` match what you extracted from the HTML design. |
| 45 | |
| 46 | ### Anti-patterns for Phase 2 |
| 47 | - ❌ Hardcoding color hex codes or rgba strings directly inside component StyleSheet declarations. |
| 48 | - ❌ Using theme tokens from a previous project without extracting them from the new design. |
| 49 | - ❌ Skipping the creation/update of `src/theme.ts`. |
| 50 | |
| 51 | ## Phase 3: Architectural rules and HTML mapping |
| 52 | |
| 53 | > **GATE: Every component MUST satisfy ALL of the following rules. Violations will cause `npm run validate` to fail.** |
| 54 | |
| 55 | ### Element mapping |
| 56 | Map HTML elements to React Native components using these rules: |
| 57 | |
| 58 | | HTML | React Native | Notes | |
| 59 | |------|-------------|-------| |
| 60 | | `<div>` | `View` | Default container | |
| 61 | | `<span>`, `<p>`, `<h1>`-`<h6>` | `Text` | All text must be wrapped in `Text`. Nest `Text` for inline styling. | |
| 62 | | `<img>` | `Image` | |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
