| name | add-mobile-screen |
| description | Scaffold a new mobile screen and/or API call in the Expo app following this project's conventions (design-system components, navigation, TanStack Query api/core, theme, i18n). Use when adding or extending a mobile screen or backend call. |
Add a mobile screen / API call
Read mobile/AGENTS.md first. Prefer the project generators over hand-writing
boilerplate — then customize the output.
Screen
- Scaffold:
bun run screen -- <Name>Screen <area> (e.g. bun run screen -- ProfileScreen main).
Then fill it in with the design system: Screen, AppText, Button, TextInput
from @/components; colors/spacing from useTheme(); copy from useTranslations()
(never cast locale). No NativeWind className for layout — theme tokens / RN styles + gap.
- Register the route: add to
navigation/routes.ts, the param list in
navigation/types, and the relevant stack (AuthStack / MainTabs / RootStack).
- Subscribe to stores with selectors (
useStore(s => s.x)), never the whole store.
API call
- Scaffold the request fn + TanStack hook with the generator:
bun run api -- <method> <resource> <name> <endpoint>
(e.g. bun run api -- get user getProfile /v1/users/me) → creates
src/api/core/<resource>/<name>.ts. The endpoint must include /v1 (base URL has /api).
- Add/adjust request/response types in
src/api/types/{request,response}/<domain>.ts
and the endpoint const in src/api/endpoints/<domain>.ts; wire the barrels.
- Use
apiClient; skipAuthRefresh: true only for logout-time calls.
Auth-state writes go through authStore (setAuthSession, etc.).
Verify
- From
mobile/: bun run lint (expo lint --max-warnings 0 + tsc — warnings
fail) and bun run test.
Add tests for pure logic; avoid renderHook (react-test-renderer vs React 19) —
extract and test pure functions, or mock native modules with the mock-prefixed pattern.
