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.