rn-add-screenlisted

Use to add a new screen to an existing Expo + RN app: from a description, a wireframe, or a screenshot, generate the route file in app/ (Expo Router file-based), wire up data fetching via TanStack Query if needed, apply NativeWind classes from the project DESIGN.md tokens, and respect the scaffolded folder layout. Reads .workflow/meta.json with stack.framework="expo-rn" and phase ≥ "scaffolded". Use when dev-flow routes here from scaffolded+expo-rn, or the user says "add a login screen", "create a profile screen from this screenshot", "aggiungi una schermata X". Not for: scaffolding the app (rn-bootstrap), adding backend modules (rn-module-add Wave 3), pure styling changes to an existing screen (rn-styling).
lukedj78/dev-flow · ★ 4 · Web & Frontend · score 77

Install: claude install-skill lukedj78/dev-flow

# rn-add-screen — add a new screen to a scaffolded RN/Expo app ## Contract See `references/contracts.md` (vendored from `dev-flow`). Key facts: - Reads `<project-root>/.workflow/meta.json#stack.framework` — must be `"expo-rn"`. - Requires `meta.json#phase ≥ "scaffolded"` (run `rn-bootstrap` first). - Reads `DESIGN.md` from project root for the design tokens. - Writes ONE new file under `<project-root>/app/...` per call — **routes only**: Expo Router treats every file under `app/` as a route, so nothing else may live there. Optional: screen-private components under `<project-root>/components/<feature>/` (L0, OUTSIDE `app/` — see Folder structure rules below), hooks under `<project-root>/lib/queries/`. - Sets `meta.json#phase = "page_generated"` after the first screen, then leaves it (subsequent screens are still `page_generated`). - Always idempotent: re-adding the same route detects the existing file and reports. ## When this skill applies - Phase is `scaffolded` or `page_generated`. - The user describes a screen: name, content, behavior. Or provides a screenshot/wireframe to translate. - Orchestrator routes here from `dev-flow`. ## Knowledge dependencies (read these first) - `rn-fundamentals/SKILL.md` — file layout, modern primitives. - `rn-styling/references/patterns.md` — root screen pattern, dark mode, FlashList. - `rn-expo-router/references/concepts.md` — file-based routing rules. - `rn-expo-router/references/patterns.md` — modal vs push, search params, auth gates.