add-mobile-screen

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

1. 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.
2. Register the route: add to navigation/routes.ts, the param list in navigation/types, and the relevant stack (AuthStack / MainTabs / RootStack).
3. Subscribe to stores with selectors (useStore(s => s.x)), never the whole store.

API call

4. 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).
5. 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.
6. Use apiClient; skipAuthRefresh: true only for logout-time calls. Auth-state writes go through authStore (setAuthSession, etc.).

Verify

8. 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.