Skill
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…
@google-labs-codeView SkillDevelopment
Skill
/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.
Install
$ npx -y skills add google-labs-code/stitch-skills --skill react-native --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/react-native
Context preview
The summary Claude sees to decide when to auto-load this skill.
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
SKILL.md
react-native.SKILL.mdname: stitch::react-native
description: >-
Convert Stitch HTML designs to React Native components, or syncs/updates existing
native components to align with the latest Stitch designs, using StyleSheet.
allowed-tools:
- "stitch*:*"
- "Bash"
- "Read"
- "Write"
- "web_fetch"
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 `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls. 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. 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. **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. 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:
- `projectId`, `title`, `deviceType`
- A `Last Sync Time` field matching the current sync ISO execution time
- A `screens` map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.
Anti-patterns for Phase 1
- ❌ Reading `.stitch/designs/*.html` directly without calling MCP `get_screen` first.
- ❌ Skipping the `fetch-stitch.sh` download script.
- ❌ Not asking the user when existing files are found.
- ❌ Skipping the visual audit of `.png` screenshots.
- ❌ Failing to generate or update `.stitch/metadata.json` and its `Last Sync Time` field upon syncing.
Phase 2: Theme extraction
> **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.**
1. **Extract `tailwind.config`**: Open each downloaded HTML file and locate the `tailwind.config` object in the `<head>` `<script>` block. Extract:
- All color tokens
- Font families
- Spacing values
- Border radius values
- Font size/typography tokens
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. 3. **Verify theme**: Confirm the theme colors and fonts in `src/theme.ts` match what you extracted from the HTML design.
Anti-patterns for Phase 2
- ❌ Hardcoding color hex codes or rgba strings directly inside component StyleSheet declarations.
- ❌ Using theme tokens from a previous project without extracting them from the new design.
- ❌ Skipping the creation/update of `src/theme.ts`.
Phase 3: Architectural rules and HTML mapping
> **GATE: Every component MUST satisfy ALL of the following rules. Violations will cause `npm run validate` to fail.**
Element mapping
Map HTML elements to React Native components using these rules:
| HTML | React Native | Notes | |------|-------------|-------| | `<div>` | `View` | Default container | | `<span>`, `<p>`, `<h1>`-`<h6>` | `Text` | All text must be wrapped in `Text`. Nest `Text` for inline styling. | | `<img>` | `Image` | Use `source={{ uri }}` for remote images, `require()` for local assets. | | `<button>`, `<a>` | `Pressable` | Prefer `Pressable` over `TouchableOpacity`. Use `onPress` instead of `onClick`. | | `<input>` | `TextInput` | Map `placeholder`, `value`, `onChangeText`. | | `<scroll container>` | `ScrollView` | For short lists only. Use `FlatList` for long or dynamic lists. | | `<ul>`/`<ol>` with many items | `FlatList` | Requires `data`, `renderItem`, `keyExtractor`. | | `<section>` with grouped data | `SectionList` | For grouped data with headers. Use tab navigator for tab-based layouts. | | `<select>` | Third-party picker or custom modal | React Native has no built-in select. | | `<svg>` | `react-native-svg` | Convert SVG markup to `Svg`, `Path`, `Circle`, etc. | | Root wrapper | `SafeAreaView` | Wrap top-level screens to avoid notch/status bar overlap. |
Style mapping
CSS and Tailwind classes do not work in React Native. Convert all styles to `StyleSheet.create()`:
- **Layout**: Fl
Read more
name: stitch::react-native description: >- Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet. allowed-tools: - "stitch*:*" - "Bash" - "Read" - "Write" - "web_fetch"
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 `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls. 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. 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. **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. 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:
- `projectId`, `title`, `deviceType`
- A `Last Sync Time` field matching the current sync ISO execution time
- A `screens` map detailing each screen's ID, label, sourceScreen reference, dimensions, and canvasPosition.
Anti-patterns for Phase 1
- ❌ Reading `.stitch/designs/*.html` directly without calling MCP `get_screen` first.
- ❌ Skipping the `fetch-stitch.sh` download script.
- ❌ Not asking the user when existing files are found.
- ❌ Skipping the visual audit of `.png` screenshots.
- ❌ Failing to generate or update `.stitch/metadata.json` and its `Last Sync Time` field upon syncing.
Phase 2: Theme extraction
> **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.**
1. **Extract `tailwind.config`**: Open each downloaded HTML file and locate the `tailwind.config` object in the `<head>` `<script>` block. Extract:
- All color tokens
- Font families
- Spacing values
- Border radius values
- Font size/typography tokens
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. 3. **Verify theme**: Confirm the theme colors and fonts in `src/theme.ts` match what you extracted from the HTML design.
Anti-patterns for Phase 2
- ❌ Hardcoding color hex codes or rgba strings directly inside component StyleSheet declarations.
- ❌ Using theme tokens from a previous project without extracting them from the new design.
- ❌ Skipping the creation/update of `src/theme.ts`.
Phase 3: Architectural rules and HTML mapping
> **GATE: Every component MUST satisfy ALL of the following rules. Violations will cause `npm run validate` to fail.**
Element mapping
Map HTML elements to React Native components using these rules:
| HTML | React Native | Notes | |------|-------------|-------| | `<div>` | `View` | Default container | | `<span>`, `<p>`, `<h1>`-`<h6>` | `Text` | All text must be wrapped in `Text`. Nest `Text` for inline styling. | | `<img>` | `Image` | Use `source={{ uri }}` for remote images, `require()` for local assets. | | `<button>`, `<a>` | `Pressable` | Prefer `Pressable` over `TouchableOpacity`. Use `onPress` instead of `onClick`. | | `<input>` | `TextInput` | Map `placeholder`, `value`, `onChangeText`. | | `<scroll container>` | `ScrollView` | For short lists only. Use `FlatList` for long or dynamic lists. | | `<ul>`/`<ol>` with many items | `FlatList` | Requires `data`, `renderItem`, `keyExtractor`. | | `<section>` with grouped data | `SectionList` | For grouped data with headers. Use tab navigator for tab-based layouts. | | `<select>` | Third-party picker or custom modal | React Native has no built-in select. | | `<svg>` | `react-native-svg` | Convert SVG markup to `Svg`, `Path`, `Circle`, etc. | | Root wrapper | `SafeAreaView` | Wrap top-level screens to avoid notch/status bar overlap. |
Style mapping
CSS and Tailwind classes do not work in React Native. Convert all styles to `StyleSheet.create()`:
- **Layout**: Fl
Ships withstitch-skills
A collection of agent skills and plugins for Google Stitch, following the Agent Skills open standard. Compatible with coding agents such as Codex, Antigravity, Gemini CLI, Claude Code, Cursor, and OpenCode (manual install).
Get the whole plugin
Stats
8,316
Stars
1,099
Forks
Active
Maintenance
TypeScript
Language
Apache-2.0
License
29d ago
Last commit
8mo ago
Created
Repo: google-labs-code/stitch-skills
Other skills on stitch-skills.
@google-labs-codeView SkillSkill
react-vite-dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
@google-labs-codeView SkillSkill
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
@google-labs-codeView SkillSkill
shadcn-ui
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best…
@google-labs-codeView SkillSkill
code-to-design
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload.…
@google-labs-codeView SkillSkill
extract-design-md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework.…
@google-labs-codeView Skill