Documentation
Guide · 8 steps · ~30 min planning + 1 build session

Quickstart

VibeKit Native is a planning + build framework for vibe coders shipping production-grade Expo apps. Plan with claude.ai, then your AI agent (Claude Code, Cursor, Codex, Cline, Windsurf, Gemini, Aider) builds the app phase by phase — installing components from the registry as it goes. You write zero boilerplate; you confirm between phases.

The component registry is a tool the agent uses, not the headline product. The framework is what saves you tokens, time, and design decisions.

Prerequisites

  • Node.js 20+, pnpm 9+, git, gh CLI
  • Expo CLI + EAS CLI (npm install -g eas-cli)
  • Xcode 16+ (iOS, macOS only) OR Android Studio + emulator
  • An AI coding agent: Claude Code, Cursor, Codex CLI, Cline, Windsurf, Gemini CLI, or Aider
  • Free accounts: Anthropic Claude (claude.ai), Expo, Neon Postgres, Resend, Sentry — all have free tiers that cover the entire build

Need help installing the toolchain? Run the env-check prompt in your AI agent — it scans your machine and gives you the exact one-line installs for anything missing.

  1. 00

    Install agent rules (optional, recommended)

    Optional
    Drop the VibeKit Native rules into your AI agent so it auto-loads the framework conventions every session — no copy-pasting prompts. One-line install per agent (Claude Code, Cursor, Codex CLI, Cline, Windsurf, Gemini CLI, Aider). See skill/README.md for every agent's install command.
  2. 01

    Copy the planning prompt

    Copy the contents of CLAUDE_PROMPT.md from the repo. This is a meta-prompt that turns claude.ai into a planning assistant for your specific app.
  3. 02

    Open Claude

    Go to claude.ai and start a new conversation.
  4. 03

    Paste and add your idea

    Paste the contents of CLAUDE_PROMPT.md into Claude, then add your app idea at the bottom. Be specific about users, core flows, auth method, payment provider, and the target market (especially if you need DGateway for East African mobile money).
  5. 04

    Answer Claude's questions

    Claude asks 6–10 mobile-specific questions one at a time: iOS / Android / both? Auth method? DGateway mobile money or Stripe? Push notifications? Offline support? Visual reference (Dribbble link, competitor app, screenshot)? Answer honestly and completely. Skipping questions = vague output.
  6. 05

    Get your 4 project files

    Once you confirm, Claude generates four files as Artifacts. Save all four into your project root.
    FilePurpose
    project-description.mdComplete description of your app — features, data model, screens, API routes, integrations
    project-phases.md5-phase build blueprint with concrete tasks + install commands (your agent stops between phases)
    design-style-guide.mdFully customized visual design system (color tokens, typography scale, mobile component specs, motion timings)
    prompt.mdThe hand-off prompt you paste into Claude Code to start building
  7. 06

    Copy the 2 framework files

    Drop these two repo files into your project root:
    • • master_prompt.md — coding standards, tech stack rules, Prisma v7 + Neon HTTP adapter pattern, Better Auth + Expo plugin wiring, Expo Router structure, mobile performance budget, form rules, DGateway + Stripe patterns, EAS Build / Submit / Update / Hosting templates, dependency blocklist.
    • • vibekit-native-components.md — the registry reference. Your AI agent checks this before writing any screen from scratch and installs from the registry instead.

    Pro tip: Claude Code auto-loads CLAUDE.md. Rename (or symlink) master_prompt.md → CLAUDE.md and it auto-loads every session.

  8. 07

    Start building with Claude Code

    Open your AI agent (Claude Code, Cursor, etc.) in the project directory and paste the contents of prompt.md. The agent will:
    • • Read master_prompt.md (or CLAUDE.md), design-style-guide.md, vibekit-native-components.md, project-description.md, project-phases.md
    • • Start with Phase 1 (Foundation) — Expo + NativeWind + expo-router + Prisma v7 + Neon + Better Auth + EAS init + Sentry
    • • Install VibeKit Native components first (npx vibekit-native install <name>) before writing anything from scratch — this is where the framework saves you the most tokens, time, and design decisions
    • • Stop after each phase for your confirmation
    • • Follow the design system and coding standards exactly
  9. 08

    Run the pre-deploy review (before submitting)

    Once Phase 5 is done, paste pre-deploy-review.md into your AI agent. It performs a 24-section senior-level audit (cold-start TTI, accessibility, EAS Build, store-ready assets, webhook security, env vars) before you submit to the App Store or Play Store. Fix every 🔴 Critical and 🟠 High before submitting.

That's the whole framework

You planned your app in claude.ai (~15 min), wired up the framework files (~10 min), and then your AI agent built the app phase by phase — installing the right registry components as it went. You confirmed between phases. You ran the pre-deploy audit. You shipped.

You can also browse the registry directly and install components manually with npx vibekit-native install <name> if you have an existing Expo project. The framework workflow above is the recommended path for new builds.

Walk through a real build (Hardware POS)Browse all 65 components