Stitch React Native

---
name: stitch-react-native
version: "2.0"
last_updated: 2026-08-24
tags: [stitch, react-native, mobile, components, frontend]
description: "Convert Stitch HTML designs into React Native screens, or sync existing native components to updated Stitch designs, using native primitives, StyleSheet rules, and mobile platform checks."
license: "Apache-2.0"
---
# Stitch React Native

This skill is a catalog-normalized import from `https://github.com/google-labs-code/stitch-skills` at commit `7b53207b94e62911777d53d4238b5f8c88c2b519`, source path `plugins/stitch-build/skills/react-native`. The upstream control file was corrected for this workspace: the verified Stitch MCP surface here is design-system oriented, so screen lookup, screen generation, and screen editing tools must be used only when the current host explicitly exposes them.

## When to Use This Skill

- Use when Stitch web designs should become React Native screens or existing native components must be synchronized with newer Stitch evidence.
- The task involves Google Stitch project IDs, `.stitch/` artifacts, DESIGN.md files, Stitch exports, or Stitch-specific validation.
- The broader `stitch-design` router points here as the narrowest workflow.

## Workflow

1. Start from exported Stitch HTML and a screenshot, using host-listed screen tools only when present.
2. Extract current theme values into `src/theme.ts` and record available project/screen identifiers plus the sync timestamp in `.stitch/metadata.json`.
3. Map web elements to React Native primitives and wrap visible text in `Text`.
4. Translate CSS into `StyleSheet.create()` with shared theme values rather than raw color literals.
5. Replace hover, fixed positioning, browser-only CSS, and DOM events with native patterns.
6. Use `react-native-safe-area-context`, accessibility labels and roles, useWindowDimensions, Platform.select, FlatList, and SectionList where appropriate.
7. Validate syntax with the bundled validator when dependencies are installed.

## Local Assets

- `examples/`, `resources/`, `references/`, or `reference/` are upstream support material when present. Treat `SKILL.md` as the source of truth if a support file mentions an unavailable MCP tool.
- `scripts/` are optional helpers. On Windows, prefer PowerShell or Node equivalents unless Git Bash or WSL is actually available.
- Keep generated `.stitch/` files out of commits unless the user explicitly wants them as durable examples.

## Corrected Stitch MCP Surface

Verified in this workspace on 2026-06-15: `create_project`, `upload_design_md`, `create_design_system_from_design_md`, `list_design_systems`, and `apply_design_system`. This 2026-07-29 source refresh did not re-verify a broader live MCP surface. Do not claim `list_projects`, `list_screens`, `get_project`, `get_screen`, `generate_screen_from_text`, `edit_screens`, or `generate_variants` were used unless the current host exposes those exact tools in the active tool list.

## Anti-Patterns

- Claiming a Stitch screen-generation, screen-editing, or screen-retrieval MCP call succeeded when the active host does not expose that tool.
- Uploading files, screenshots, HTML, markdown, or design assets to Stitch without user-approved destination and artifact details.
- Reading, printing, storing, or committing Stitch API keys, MCP config secrets, cookies, or credential-bearing files.
- Treating generated design or code as final without local render, syntax, or artifact verification.
- Collapsing this workflow into a broader frontend/design skill when Stitch-specific files, project IDs, or design-system assets matter.

## Verification Protocol

Before claiming this skill was applied successfully:

1. Pass/fail: No DOM tags or web event names remain.
2. Pass/fail: Text, images, lists, and press interactions use native primitives.
3. Pass/fail: iOS and Android shadow/safe-area differences are handled or scoped out.
4. Pass/fail: The result was checked with local React Native tooling or blocker evidence.
5. Pressure-test scenario: Repeat the workflow with Stitch MCP screen tools unavailable and confirm the fallback path remains honest and actionable.
6. Success metric: The user can identify the exact artifact, project/design-system target, and verification evidence without relying on unstated MCP behavior.

<!-- MCP:START -->

<!-- PORTABILITY:START -->

## Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, and Codex.

- GitHub Copilot: keep the folder in a Copilot-visible skill path or wrap the
  workflow in project instructions when folder discovery is unavailable.
- Claude Code: keep the folder in a local skills directory or a compatible plugin source.
- Codex: install or sync the folder into
  `$CODEX_HOME/skills/stitch-react-native` and restart Codex after major changes.

<!-- PORTABILITY:END -->

## MCP Availability And Fallback

Preferred MCP Server: Stitch MCP

- Fallback prompt: "Use the Stitch React Native skill without Stitch MCP. Use local HTML/screenshots and manual native mapping when Stitch MCP screen retrieval is unavailable. Show the exact files, commands, manual Stitch UI steps, and verification evidence used before concluding."
- Verified Stitch MCP tools in this workspace are design-system/project oriented; use broader screen tools only when the current host exposes them.
- Use local scripts, exported HTML/screenshots, the Stitch web UI, and project metadata files as the fallback evidence path.

<!-- MCP:END -->

## Related Skills

- [stitch-react-components](../stitch-react-components/SKILL.md): Use when the task also needs this adjacent Stitch workflow.
- [frontend-design](../frontend-design/SKILL.md): Use when the task also needs this adjacent Stitch workflow.
- [react-development](../react-development/SKILL.md): Use when the task also needs this adjacent Stitch workflow.