By Malik Chohra
Vibe Coding Boilerplate: Why Blank Expo Projects Break Cursor (and How to Fix It)
Cursor and Claude Code generate broken React Native code in blank Expo projects, not because the models are weak, but because there's no architectural context. Here's what a vibe coding boilerplate actually is, and the exact files you need.
A vibe coding boilerplate is a React Native codebase structured so that AI tools, Cursor, Claude Code, Antigravity, generate production-quality code from the first prompt. The difference between vibe coding that ships and vibe coding that breaks isn't the model. It's whether your repo gives the AI an architecture it can't misread. This post explains what that actually looks like, file by file, and why a blank create-expo-app project is the worst place to start.
đź’ˇ Skip the setup
AI Mobile Launcher ships every file described below, pre-wired and verified. Open it in Cursor, prompt your first feature, watch the AI stay on rails.
What is vibe coding, exactly?
Vibe coding is the practice of describing what you want, in plain English, to an AI tool like Cursor or Claude Code, then letting it write the code. You stay at the “what” and “why” layer; the AI handles the “how.”
It works wonderfully for small scripts and stateless web functions. It collapses on React Native because mobile apps have hidden constraints that AI tools don't see in a generic project: navigation lifecycles, platform-specific files, native module limitations, memory management quirks, deep linking schemes, and a state model that has to survive backgrounding.
Why does Cursor break React Native apps?
In a blank Expo project, Cursor has nothing to anchor to. So it does what an LLM does without context: it picks the most statistically common patterns from its training data. For React Native, that means:
- Suggesting
useNavigationfrom@react-navigation/nativein an Expo Router project (different API). - Wrapping every screen in
StyleSheet.createwhen your codebase uses Restyle or NativeWind. - Inventing imports, components that “sound right” but don't exist in your design system.
- Using
AsyncStoragewhen MMKV is the project standard. - Adding global state for things that should be local, and local state for things that should be global.
- Generating navigation code that re-renders the entire stack on every tab switch.
None of these are model failures. They're context failures. The AI is generating the most likely answer in the absence of constraints.
What a vibe coding boilerplate actually contains
A real vibe coding boilerplate ships four kinds of context:
1. An instruction file the AI reads first
CLAUDE.md for Claude Code, .cursorrules for Cursor, agents.md for Antigravity. These declare the stack, the architectural rules, the patterns to follow, and the patterns to never use. They're the closest thing AI tools have to a system prompt that survives across every prompt in a project.
2. A memory bank tiered by access frequency
U-AMOS 2.0 (the system AI Mobile Launcher uses) splits memory into Hot / Warm / Cold tiers across nine files: project description, product positioning, system architecture, current focus, recent progress, decisions, knowledge, active task, and known gotchas. Hot tier loads every session; Cold tier loads only when relevant. Net result: the AI reads what it needs and stops blindly traversing your whole repo.
3. A context map that replaces exploratory searches
One file, ai_rules/context_map.md, that lists every feature, every service, every UI component with a one-line responsibility. The AI checks this before writing code that touches them. It stops guessing what your auth flow looks like and starts reading it.
4. Inventory README files inside each layer
src/ui/README.md lists the 60+ components. src/services/README.md lists the 18 services. src/features/README.md lists every feature folder. Together, they're an anti-hallucination shield: the AI references components and services that demonstrably exist, instead of inventing names.
The seven anti-hallucination questions every prompt should pass
Before AI Mobile Launcher generates code, it's instructed to walk through this checklist:
- Does the file I'm editing exist?
- Did I check the UI inventory for an existing component?
- Did I check the services registry for an existing service?
- Did I verify the import path is correct?
- Did I confirm the function or type I'm calling exists?
- Am I using
t('key')for user-facing text? - Am I using
logger.*instead ofconsole.log?
The checklist isn't magic. It's discipline. But because it's embedded in the rules the AI reads before every response, it actually applies, instead of being aspirational documentation no one reads.
How this differs from a traditional boilerplate
A traditional Expo boilerplate (Ignite, create-expo-app, the dozens of starters on GitHub) optimises for one user: a human reading the code. It minimises file count, ships clever abstractions, and trusts that you'll figure out the patterns by reading.
A vibe coding boilerplate optimises for two users: a human and an LLM. That means:
- More explicit, less clever. A second-most-clever pattern that the AI can replicate beats the cleverest pattern that AI gets wrong half the time.
- Co-located inventories. Every layer has a README that the AI is required to load before generating into that layer.
- Explicit prohibitions. “Never use
any” matters more than “prefer strict types.” LLMs follow direct rules better than soft preferences. - Generators for repetitive scaffolding. Step-by-step recipes for paywall, onboarding, design system, gamification, so the AI follows the same path you would.
What you get when this is set up correctly
The honest test of a vibe coding boilerplate is what happens on prompt one. In a blank project, you spend the next two hours fixing what the AI generated. In a properly structured codebase, the AI's first answer is mergeable.
Practical wins teams report after switching:
- Navigation suggestions match the project's actual navigator (Stack vs Tabs vs Drawer) without being told.
- State management goes to the right place, Redux slice for global, local
useStatefor ephemeral, without prompt micromanagement. - UI generation references real components from the design system, not invented ones.
- i18n keys get added to
en.jsonautomatically, not hardcoded. - Tests get written alongside code because the rules say so.
Where to start
If you want to build a vibe coding boilerplate yourself, start with three files: a CLAUDE.md declaring your stack and prohibitions, a context map listing every feature with a one-line responsibility, and a UI inventory README. That alone reduces hallucinations by ~70% in our internal benchmarks.
If you'd rather skip 100+ hours of context engineering, the Expo boilerplate at AI Mobile Launcher ships all of it pre-wired, feature-first folders, U-AMOS 2.0 memory bank, anti-hallucination checklist, generators, and 97+ AI-authored articles. Built on Expo SDK 55 and React Native 0.83.6. Verified in production.