The framework for shipping production-grade Next.js apps with any coding agent — Claude Code, Cursor, Kiro, Antigravity, Windsurf, Cline, Aider. Generate 4 files. Build phase by phase. Ship without burning tokens.
git clone github.com/MUKE-coder/vibekitcopyVibeKit's 4 generated files plus the master prompt are plain markdown — drop them into CLAUDE.md, .cursorrules, .kiro, or any other context format. The framework moves with you.
Tested with all 12 agents listed · Compatible with any agent that ingests project files
Plan with Claude. Build with any agent. Audit and ship. The whole flow takes an afternoon — and the patterns repeat for every project after.
Paste the planning prompt into Claude.ai with one paragraph about your app. Claude either interviews you or jumps straight to a structured summary if your brief is detailed — then asks for your consent before generating.
Add the 4 files plus the master prompt and component registry to your project. Open Claude Code, Cursor, Cline, Windsurf — any agent that reads files. It reads everything, plans Phase 1, and starts building. Stops between phases for your sign-off.
Before going live, paste the pre-deploy review prompt. Your agent runs a senior-level audit covering security, performance, and resource usage. Fix every Critical. Push to Vercel. Point a domain. Done.
See the laptop demo below for what step 1 looks like in real time
Watch a real Claude conversation: type the idea, Claude interviews you, then generates exactly what your coding agent needs.
Thirteen specific pains that derail AI-built apps — and how VibeKit makes each one disappear.
Every app looks the same — purple gradients, generic shadcn defaults, no brand identity.
design-style-guide.md is customized per project (colors, typography, spacing) and Claude Code follows it exactly.
Buttons, cards, and forms look slightly different on every page.
Design tokens defined in one place, enforced by the master prompt across every component.
AI writes insecure login flows, missing password reset, no OAuth, session bugs.
jb-components.md points Claude to install JB Better Auth UI — battle-tested auth in one command.
$100–$200 per project because AI rewrites boilerplate every time (auth, tables, forms, uploads).
JB Component Registry covers the big primitives — AI installs and wires up instead of writing from scratch (60–80% token savings).
AI tries the same broken fix repeatedly, context gets polluted, progress stalls.
Phase-based build + rescue prompts in prompt-engineering.md + troubleshooting.md playbook.
Starting with “build me a SaaS” and hoping for the best.
Claude interviews you first, generates project-description.md + project-phases.md — a clear blueprint before a single line of code.
AI picks a different stack every project — jsPDF here, Drizzle there, useEffect for data.
Master prompt locks the stack: Next.js 16 + Prisma v7 + React Query + Zod + @react-pdf/renderer + xlsx — always.
AI mixes Prisma v6 and v7 patterns, breaks the build.
Master prompt enforces Prisma v7 patterns exactly (generator, custom output path, adapter-pg).
App works locally, breaks in production — env vars, DNS, SSL, email spam.
deployment.md + environment-variables.md walk through every step with checklists.
“Make it look better” produces unpredictable changes that break other things.
prompt-engineering.md teaches the 5-part formula and context-loading technique.
Stripe keys, webhooks, feature gating, billing pages — most builds never ship monetization.
monetization-guide.md + JB Stripe UI component handle the full flow.
Mid-build, no idea what’s done vs. what’s left.
Phase tasks in project-phases.md are checkboxes — Claude Code checks them off as it goes.
Build stalls for hours because AI keeps making it worse.
Rescue prompts + hard-reset protocol + the V0 bypass technique in prompt-engineering.md.
VibeKit generates 4 universal files that work with every coding agent that reads files — Claude Code, Cursor, Kiro Code, Antigravity, Windsurf, Cline, Aider, or anything else with a CLAUDE.md / .rules / project context.
Click a node to expand · Click empty space to resume rotation
The planning step generates everything any coding agent needs — Claude Code, Cursor, Kiro, Antigravity, Windsurf, Cline, Aider — anything that reads files. No vague briefs. No guessing. Each file has a single job.
project-description.mdComplete description of your app — features, data model, pages, integrations.
project-phases.mdBuild blueprint with phases, tasks, and install commands. Your agent checks them off.
design-style-guide.mdFully customized visual design system — colors, typography, spacing, component specs.
prompt.mdThe prompt you paste into your coding agent to start building.
Every project ships with the same opinionated stack so AI never has to invent — and you never have to debug a dependency mismatch.
| Layer | Technology | Why |
|---|---|---|
| Framework | Next.js 16 (App Router) | Latest App Router with React 19 |
| Language | TypeScript 5.9 | Type safety, better DX |
| Database | Neon — Serverless Postgres | Free tier, instant setup, serverless scale |
| ORM | Prisma v7 | Type-safe, AI reads schema easily |
| Authentication | Better Auth | Secure, extensible, Prisma-compatible |
| Data Fetching | React Query + Fetch API | Caching, refetching, loading states built-in |
| API Layer | API Routes (Route Handlers) | Server-side logic via Next.js App Router |
| Validation | Zod + React Hook Form | Type-safe validation on client and server |
| PDF Generation | @react-pdf/renderer | React components to PDF |
| Excel Export | xlsx | Read/write Excel, lightweight |
| File Storage | Cloudflare R2 or UploadThing | R2 for S3-compat, UploadThing for simple uploads |
| Resend + React Email | Best DX, great deliverability | |
| Payments | Stripe | Industry standard, webhook-driven |
| Styling | Tailwind CSS v4 + shadcn/ui | AI knows these patterns well |
| Deployment | Vercel | One-click, preview URLs, zero config |
| Domain & DNS | Cloudflare | Free SSL, fast DNS |
| Components | JB Component Registry | Production-ready shadcn components |
File uploads — choose between Cloudflare R2 for full S3-compatible control, or UploadThing for the simplest path to image uploads.
Reference guides for every layer of the stack — database, deployment, design, monetization, troubleshooting — plus the core prompts Claude Code reads while building.
vibekit/
├── README.md ← Framework overview
├── CLAUDE_PROMPT.md ← Paste into Claude.ai to plan your project
│
├── master_prompt.md ← Coding standards for Claude Code (copy to your project)
├── design-style-guide.md ← Design style guide template
├── jb-components.md ← JB component registry reference (copy to your project)
├── pre-deploy-review.md ← Paste into Claude Code before deploying — security/perf audit
│
├── prompt-engineering.md ← Token economy, 5-part formula, rescue system
├── deployment.md ← Vercel, Netlify, Cloudflare, SSL
├── environment-variables.md ← Step-by-step for every secret
├── database-guide.md ← Neon, Prisma, schema patterns, migrations
├── design-system-guide.md ← Design principles, color palettes, component styles
├── troubleshooting.md ← Symptoms → fixes, AI rescue protocols
└── monetization-guide.md ← Stripe, webhooks, feature gating, billingmaster_prompt.mdClaude Code reads this first — tech stack + coding rulesjb-components.mdReference for when to install which JB componentpre-deploy-review.mdPaste into Claude Code before deploying for an auditClaude generates project-description.md, project-phases.md, design-style-guide.md, and prompt.md for you in the planning step.
Run pre-deploy-review.md inside Claude Code as the final task. It writes a full report — Critical / High / Medium — straight into your repo. Address the Criticals before deploying.
N+1 queries, missing pagination, expensive operations in hot paths, regex backtracking risks.
Unauthenticated routes, SQL injection, missing rate limiting, exposed secrets, XSS, CSRF.
Webhook idempotency, job retries with exponential backoff, distributed locks, dead-letter queues.
Memory leaks, unclosed streams, missing timeouts, cache without limits, sequential calls that should be parallel.
Production-ready shadcn components for every primitive — auth, tables, forms, file uploads, e-commerce. Claude Code checks the registry before writing from scratch, saving 60–80% of tokens.
Sign-in, sign-up, OAuth, password reset, OTP — full auth stack.
10 marketing pages, navbar, footer, dark mode, i18n, full SEO.
Embedded Payment Element, checkout flow, orders, webhooks.
Search, sort, pagination, column visibility, row selection.
S3/R2 drag-drop upload, preview, progress, file management.
File-based blog with syntax highlighting and full SEO metadata.
Mobile Money + Stripe checkout for African markets.
Client-side cart with localStorage persistence.
Filterable dropdown with search and clear.
Interactive API docs with OpenAPI 3.0 spec.
Built something reusable — auth flow, payment widget, AI feature, dashboard primitive? Open a pull request. Once merged, your component gets a permanent doc page and is loaded by every Claude Code agent reading the registry.
{
slug: "your-thing",
name: "Your Thing",
category: "data",
install: "...",
features: [...],
filesAdded: [...],
}VibeKit is used by indie hackers, founders, and agencies across East Africa and beyond — anyone who'd rather ship than configure.
“Shipped my client portal in 4 days vs my usual 3 weeks. The phase-by-phase build means I never get lost mid-project — I just know what's next.”
“Pre-deploy review caught two unauthenticated API routes I would have shipped. That's an actual security incident avoided. This pays for itself.”
“I've used Cursor for 8 months. VibeKit's master_prompt.md turned it into a different tool — finally consistent code across every project.”
“Saved roughly $180 in Claude tokens on the last build. The JB component registry means the agent never reinvents auth or file uploads.”
“The 4 generated files are the magic. project-phases.md is basically a real PRD — clients trust it more than my own scoping docs.”
“Shipped my client portal in 4 days vs my usual 3 weeks. The phase-by-phase build means I never get lost mid-project — I just know what's next.”
“Pre-deploy review caught two unauthenticated API routes I would have shipped. That's an actual security incident avoided. This pays for itself.”
“I've used Cursor for 8 months. VibeKit's master_prompt.md turned it into a different tool — finally consistent code across every project.”
“Saved roughly $180 in Claude tokens on the last build. The JB component registry means the agent never reinvents auth or file uploads.”
“The 4 generated files are the magic. project-phases.md is basically a real PRD — clients trust it more than my own scoping docs.”
“Switched from create-next-app to VibeKit and never looked back. The locked stack means I can debug any project from any month identically.”
“First time I built a real SaaS solo. Auth worked. Stripe worked. Emails landed. The framework didn't let me skip steps that matter.”
“The orbital design system finally killed AI slop in my apps. Every screen actually feels like it belongs to my brand, not Anthropic's defaults.”
“Onboarded two juniors with VibeKit instead of a 50-page wiki. They were shipping on day three. The framework IS the documentation.”
“Built and deployed an invoicing app in a weekend. Mobile money checkout via DGateway, Stripe for international clients, all working. Wild.”
“Switched from create-next-app to VibeKit and never looked back. The locked stack means I can debug any project from any month identically.”
“First time I built a real SaaS solo. Auth worked. Stripe worked. Emails landed. The framework didn't let me skip steps that matter.”
“The orbital design system finally killed AI slop in my apps. Every screen actually feels like it belongs to my brand, not Anthropic's defaults.”
“Onboarded two juniors with VibeKit instead of a 50-page wiki. They were shipping on day three. The framework IS the documentation.”
“Built and deployed an invoicing app in a weekend. Mobile money checkout via DGateway, Stripe for international clients, all working. Wild.”
I'm Muke Johnbaptist, founder of Desishub Technologies in Kampala, Uganda. I specialize in AI engineering, Go (Golang) backend development, and designing systems across mobile, desktop, and web. I'm also the creator of the Grit Framework.
VibeKit is what I wished existed when I started using AI to build real apps. I was burning tokens, getting a different stack every project, and watching agents ship code with unauthenticated routes. So I built the framework that fixes all of it — and put it in front of every coding agent I use.
Everything in here is battle-tested in real client projects and my own apps. If it ships from my laptop, it goes into the framework.
Indie hackers, freelancers, founders — we trade screenshots, debug agent loops together, and share what's working in the framework. Drop in to ask anything.
Open the planning prompt, describe your idea, and let Claude Code build it phase by phase — with a stack that's locked, audited, and production-ready.