Stitch React Native

This skill is a catalog-normalized import from https://github.com/google-labs-code/stitch-skills at commit 3f64079d75d025bc5890c73669f27c26a2d80b31, 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.