Cursor for Mobile App Building

Core concepts

1. Project rules (.cursor/rules): Rules are .mdc files with a description, optional globs, and an alwaysApply flag. Put your stack, naming and folder conventions there so every chat starts informed. — Cursor docs
2. Chat vs agent vs inline edit: Use chat to plan and ask questions, inline edit for a small change in one file, and agent mode for multi-file work that needs to run commands. Prefer the smallest mode that does the job. — Cursor docs
3. Context with @ mentions: Reference files, folders and docs explicitly so the agent reads the right code instead of guessing. Mention SPEC.md and the screen you are editing. — Cursor docs
4. Review every diff: Accept changes hunk by hunk. Run npx tsc --noEmit and npx expo lint after each agent step. — Expo TypeScript guide

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

• Cursor tutorials — Cursor channel
• Cursor with React Native — YouTube search: Cursor React Native Expo

Explanation

Writing a good rule

A rule should be short, specific and testable: 'Use NativeWind classes, no StyleSheet.create' is better than 'write clean styles'. Browse real examples in our Cursor rules database and copy the ones that fit.

When the agent loops

If the agent keeps retrying the same failing fix, stop it, paste the exact error, and ask it to explain the cause before changing code.

What Is It?

Cursor is a code editor with built-in AI chat and agents that can edit many files and run terminal commands.

Why Should I Care?

It keeps the plan, the code and the diff in one window, which suits the small-step vibe coding loop.

Real World Analogy

Cursor is a workshop where the apprentice sits at the next bench, sees your blueprint on the wall, and hands you each finished part for inspection.

Visual Mental Model

Rules + @context -> Agent edit -> Diff view -> Accept/reject -> Run on device

Smallest Possible Example

---
description: Expo + NativeWind conventions
globs: app/**/*.tsx
alwaysApply: false
---
Use function components and TypeScript.
Style with NativeWind className, never inline style objects.
One screen per file under app/. No business logic in screens; call hooks in lib/.

Common Mistakes

❌ Leaving every rule on alwaysApply.

Too much standing context dilutes the important rules. Use globs to attach rules only to relevant files.

❌ Accepting 'Accept all' on large agent diffs.

You lose the review step that catches invented APIs and deleted code.

Build This Mini Project

Create .cursor/rules/expo.mdc with five rules for your stack, then ask Cursor to add a Settings screen and check the diff against the rules.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Generate rules from the repo

Inspect this Expo project and write .cursor/rules/expo.mdc with front matter (description, globs, alwaysApply). Include stack, folder layout, styling approach, and the commands to lint, typecheck and test. Max 40 lines.

Fix with a diagnosis first

Here is the exact error and the file: [paste]. Explain the root cause in two sentences, propose the smallest fix, then wait for my approval.

Rules, databases & blogs to use

• React Native Expo rule: Expo conventions rule
• Expo Router TypeScript rule: file-based routing rule
• Mobile rules category: all mobile rules

Resources

• Cursor documentation
• Expo documentation