← ClaudeAtlas

react-nativelisted

Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
coachpo/plugins-claude · ★ 0 · Web & Frontend · score 68
Install: claude install-skill coachpo/plugins-claude
# 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`. > Work through the phases in order. Each phase lists a gate — the condition that marks it complete — because skipping a gate produces components that fail validation or drift from the Stitch design. ## Phase 1: Retrieval and networking > **Gate: Phase 1 is complete when all screens have been downloaded via `scripts/fetch-stitch.sh` and visually audited.** Don't read local design files without going through this phase — you'd skip the visual audit and could be working from stale designs. 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**: Reuse the existing local files and tell the user you did so. Re-download only when the user asks for a refresh or the Stitch project has changed since the last sync (compare `Last Sync Time` in