React Native Mobile Screen Builder

What it does

/mobile-screen is a Cursor slash command. Type it in chat to run a saved workflow: React Native Mobile Screen Builder.

Generates native mobile interfaces for React Native / Expo: safe area handling, gesture interactions, biometric authentication, and offline caching.

Native mobile screens with Expo Router, animations, and device APIs. Unlike a skill, a command is something you invoke on purpose. The agent does not decide to run /mobile-screen for you.

Why it exists

Founders retype the same multi-step prompt until it rots. /mobile-screen exists so the pipeline, all 4 steps of it, is a file in .cursor/commands, versioned with the repo.

It ships in the Engineering Kit. It is wired to the Mobile App Developer (mobile-engineer) and React 19 & Next.js Specialist (react-specialist) agents. Required skills: React Native & Mobile App Development; Design Systems, Tokens & Vanilla CSS Architecture.

When to use it

• Use when building mobile companion apps or native mobile views.
• Use /mobile-screen when you want that pipeline, not a freeform chat. If you only need one step, use a narrower command or a single agent.
• Start a new chat. Do not run this command in a thread that just wrote marketing copy.

When not to use it

• Do not run /mobile-screen as a substitute for reading the diff. The command produces files; you still gate them.
• Do not chain it into a 40-turn chat. Fresh context is part of the design.
• Do not run it if you have not filled CURSOR.md. The pipeline will invent a stack.

Example workflow

1. Create Expo Router screen file with safe area insets and theme styling
2. Implement native device API integrations (biometrics, camera, storage)
3. Add touch gestures and smooth native animations
4. Integrate local SQLite offline data caching

Example usage

Type this in Cursor chat: /mobile-screen Build React Native biometric authentication screen with Expo LocalAuthentication

The command file tells the session which agents to adopt and which skills to read. You should see phase headers, not a single dump of code.

If a phase fails its gate, stop. Do not add 'just continue'.

Example output

• Expected artifact: mobile/app/.../index.tsx
• Expected artifact: mobile/components/...

Best practices

• Keep the prompt specific. /mobile-screen Build React Native biometric authentication screen with Expo LocalAuthentication is the shape: object, constraint, and outcome.
• Let the listed agents work in order: mobile-engineer → react-specialist.
• Save outputs in the repo. Chat-only answers evaporate.
• Engineering commands should leave tests or an audit note, not only implementation files.

Common mistakes

• Typing /mobile-screen with no object ('do the thing'). The pipeline will guess.
• Re-running the command in the same chat after a failed gate instead of fixing the failing file.
• Editing the command file to skip review so it 'goes faster'.
• Skipping the React Native & Mobile App Development skill that the command depends on.