--- name: expo-from-claude-design description: Convert a Claude Design handoff bundle, HTML/CSS mockup, or design screenshot into production-ready Expo React Native code with NativeWind. ALWAYS use this skill when the user provides any of the following for an Expo/React Native project — a Claude Design link or bundle ID, a design screenshot/image, an HTML/CSS snippet, a Figma export, or any visual UI reference they want implemented as a mobile screen or component. Use even when the user does not explicitly mention Expo if the project context (CLAUDE.md, package.json with expo dependencies, app/ directory) indicates Expo Router. Use also when converting web UI code to React Native, or when the user mentions "transformer ce design", "implémente cette maquette", "code cet écran", "make this mobile". --- # Expo From Claude Design This skill converts visual UI input (Claude Design handoff, HTML/CSS, screenshots, Figma) into production-ready Expo React Native code using NativeWind for styling and Expo Router for navigation. ## When this skill triggers - User pastes a Claude Design bundle ID or claude.ai/design link - User uploads or pastes a screenshot of a UI mockup - User provides HTML/CSS code that needs to be ported to React Native - User references a Figma frame URL with intent to implement in Expo - User asks to "code this design", "implement this mockup", "make this screen", and the project is Expo ## Workflow overview ``` 1. Detect input format (Claude Design bundle | image | HTML | Figma | text description) 2. Validate Expo project context (check package.json, app/ directory, NativeWind config) 3. Trigger Superpowers brainstorm to clarify intent and scope 4. Generate spec with acceptance criteria 5. Decompose into 2-5 minute tasks 6. Apply conversion rules (HTML → RN, CSS → NativeWind, events → onPress) 7. Extract reusable components when pattern repeats 3+ times 8. Place files according to Expo Router conventions 9. Apply quality gates (accessibility, tests, types) 10. Trigger code-review before completion ``` ## Source format detection Auto-detect based on input: | Input type | Detection | |---|---| | Claude Design bundle | URL contains `claude.ai/design` or starts with `cd_` prefix | | Image upload | File attachment with extension `.png .jpg .webp` | | HTML/CSS snippet | Code block starting with ``, `

`, or `