rn-screen
Checklist for adding or changing a mobile screen or feature in the Expo app (route, feature hooks, API types, states, design tokens, accessibility, tests). Use for any UI work in mobile/.
Files1
View on GitHubSKILL.md.claude/skills/rn-screen/SKILL.md
GitHub/rn-screen: add a mobile screen/feature
Follow mobile/CLAUDE.md.
- Data: which endpoints? Make sure
src/api/schema.d.tsis current (npm run gen:api). Add query keys and a hook insrc/features/<feature>/(useQuery/useInfiniteQuery/useMutationwith cache invalidation). - Route: add a thin file under
app/that composes feature components. Choose the presentation (tab, stack push, or modal). - States: design loading (skeleton), empty (especially a new user with no runs), error (retry), and success.
- UI: use
components/uiprimitives and theme tokens only. Dark-first. Use the Wrapped token set only inside the Wrapped experience. - Formatting: distances, paces, and durations go through
src/lib/format.tsin the user's preferred units. - Motion: Reanimated on the UI thread. Respect
useReducedMotion. - Accessibility: labels on icon buttons, a text summary for charts, and tap targets of at least 44pt.
- Tests: unit tests for any new util. Use RNTL for state rendering, mocking at the fetch layer.
- Run
npm run typecheck && npm run lint && npm test, then tell the user exactly what to check in the simulator.