Run any Skill in Manus with one click

add-mobile-screen

Stars2

Forks0

UpdatedJune 23, 2026 at 14:29

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

khanhtq

khanhtq/be-clondy

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

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.

More from this repository

same repository

prisma-migration

khanhtq/be-clondy

Change the Prisma schema and create an incremental migration the standard Prisma way (migrate dev for local, migrate deploy for prod), then regenerate the client and seed. Use whenever editing backend/prisma/schema.prisma or adding/altering DB tables, columns, indexes, or enums.

2026-06-232

add-backend-endpoint

khanhtq/be-clondy

Scaffold a new NestJS endpoint/module/route in the backend following this project's conventions (module + controller + service + dto + constants, auth/roles, pagination, prisma, tests). Use when adding or extending a backend API.

2026-06-232

add-env-var

khanhtq/be-clondy

Add a new environment variable to the backend the right way — boot-time validation, .env.example documentation, and typed access. Use when introducing any new backend config/secret/flag.

2026-06-232

production-readiness

khanhtq/be-clondy

Audit the project against its production/deploy checklist — required secrets, migrations, store/push config, security toggles, and the verification gate. Use before a release, a deploy, or when asked if the app is production-ready.

2026-06-232

troubleshoot

khanhtq/be-clondy

Diagnose and fix this project's known environment, toolchain, build, and runtime traps (bun/node shell errors, ESLint version/commit failures, TS path/CSS errors, IAP/auth 500s, FCM iOS errors). Use when a command fails, a commit is blocked, or the app errors in a way that matches a known symptom.

2026-06-232

write-tests

khanhtq/be-clondy

Write unit tests following this repo's conventions for backend (NestJS, ts-jest, *.spec.ts) and mobile (jest-expo, *.test.ts, RNFB/native mocking). Use when adding test coverage for services, guards, pipes, hooks, stores, or utilities.

2026-06-232

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.