buildthisnow

The Claude Code framework for Next.js + Supabase SaaS.

One npx install drops in 118 skills, 40+ slash commands, and a specialist agent team that builds, audits, secures, monitors, and heals your app — from first commit to production and everything after.

npx buildthisnow init

Built by @speedy_devv — part of the Build Kit series. Follow for tutorials, walkthroughs, and new kit drops.

Why vertical, not horizontal?

Most Claude Code frameworks ship for everyone. This one ships for one stack and does it best-in-class:

• Web: Next.js 16 · React 19 · oRPC · Supabase · Stripe · Tailwind v4 · shadcn/ui · Inngest · Sentry
• Mobile: Expo · React Native · Flutter · native iOS (SwiftUI) · native Android · Maestro E2E — 37 mobile skills, full device/simulator automation
• Desktop: Tauri · native macOS / Windows / Linux GUI automation

If you're building something else, pick a different framework. If you're building this — no one else comes close on depth.

What Is This?

Most starter kits give you boilerplate. This one gives you a full AI development team.

Build Kit Template is a production-ready SaaS skeleton with specialist agents that don't just build your app — they stick around to maintain it, secure it, and improve it.

What the agents build for you

• Auth — email + password with OTP verification, Google OAuth, JWT claims, session cookies
• Billing — Stripe checkout, one-time purchases or subscriptions, pricing pages, customer portal
• Onboarding — multi-step flow, preference system, auth-time gating
• Design System — OKLCH color tokens, gradient buttons, shadow system, dark mode, full shadcn/ui
• Landing Page — marketing page with sticky scroll, copy framework, responsive
• Legal — terms of service, privacy policy, consent flows

What the agents do after you ship

This is where Build Kit is different. The agents don't disappear after the build. They keep working:

• Security audits — RLS gap detection, injection scanning, auth bypass checks, data leakage analysis
• Penetration testing — real exploit validation against your running app, not just static analysis
• Performance audits — frontend and backend profiling, Postgres query optimization, caching review
• Dependency audits — outdated packages, unused dependencies, dead code detection
• Error monitoring — Sentry integration, deep triage, root cause analysis, auto-fix recommendations
• Pattern drift detection — catches inconsistencies across features before they compound
• Self-healing — reads all reports, creates a branch, fixes critical issues, runs quality gates, verifies the fix, and emails you the verdict
• Scheduled monitoring — set up recurring security, performance, and error checks that run on autopilot

One command to pentest. One command to heal. One command to audit everything. The agents handle it.

Tech Stack

| Layer | Tech | |-------|------| | Framework | Next.js 16 (App Router, React Server Components) | | UI | React 19 + Tailwind v4 + shadcn/ui | | Backend | Supabase (auth, DB, RLS, realtime) + oRPC (type-safe API) | | Payments | Stripe (via Supabase Edge Functions) | | Background Jobs | Inngest |

Getting Started

Prerequisites

• Node.js 18+
• Claude Code CLI installed
• A Supabase account
• A Stripe account (for billing features)

1. Install Claude Code

npm install -g @anthropic-ai/claude-code

2. Clone and open the project

git clone <your-repo-url>
cd build-kit-template
claude

3. Start here once — /start

/start

/start is the initial intake entrypoint.

• Existing project + small fix → inspect narrowly, spec it, solve it fast
• New project + simple build → write a starter plan, then spec and build
• Existing project + complex → run a bounded repo scan first
• New project + complex → route into deep discovery only when it is actually needed

You should not need to decide between internal commands before the kit gives you something useful. Once /start has routed the project, later work should go through the recommended next command directly. Do not keep re-running /start unless you want to reframe the project.

4. Continue with the recommended next step

/spec        # focused feature or fix after `/start`
/discover    # only for new + complex work
/setup       # after discovery, or whenever service wiring / credentials are the blocker
/mobile      # choose Expo, Flutter, mobile UI, or native iOS path
/payments    # choose Stripe, Lemon Squeezy, or Polar and verify the billing flow
/deploy      # choose the shipping path and deploy safely
/mvp-spec    # only when you want the roadmap
/mvp-build   # build the next roadmap item

/start should make the next action obvious. After intake, the downstream commands are the workflow.

The Full Command Arsenal

Build

| Command | What it does | |---------|-------------| | /start | One-time intake — classifies the request, proposes one path, and gets to a useful artifact fast | | /discover | Deep discovery for new + complex product work only | | /setup | Guided environment and credential setup after discovery or when service wiring blocks progress | | /mobile | Route mobile work across Expo, Flutter, mobile UI, and native iOS without over-scoping it | | /payments | Route billing work across Stripe, Lemon Squeezy, and Polar with a verification path | | /deploy | Choose the right deploy path and activate the right shipping skills | | /mvp-spec | Generate specs for all MVP features | | /mvp-build | Build the next feature from your roadmap | | /spec | Spec + build any new feature on demand | | /enhance | Improve an existing feature |

Protect

| Command | What it does | |---------|-------------| | /security | 5 agents scan for RLS gaps, injection, auth bypass, data leakage, config issues | | /pentest | API + browser pentesting against your running app | | /audit | Dependency, dead code, and code health check |

Maintain

| Command | What it does | |---------|-------------| | /monitor | Schedule recurring security, performance, and error checks | | /sentry | Deep triage of production errors with fix recommendations | | /performance | Frontend + backend + database performance audit | | /drift | Catch pattern inconsistencies across features | | /heal | Auto-fix critical issues, run quality gates, verify, and report |

Design

| Command | What it does | |---------|-------------| | /design | Brand design system tuner | | /logo | Generate 6 brand logo variations | | /landing-design | Landing page design competition between agents |

Project Structure

.claude/
  commands/         # slash commands
  agents/           # specialist agents
  skills/           # curated skills (patterns, best practices)
  docs/             # slim pattern guides the orchestrator can load fast
  workflows/        # 6 skeleton feature workflows
  ORCHESTRATOR.md   # Full orchestration playbook

docs/
  project/          # Your product docs (generated only when deep discovery is needed)
  built/            # Feature references (generated at build time)
  patterns/         # Frontend + backend + quality patterns
  supabase/         # Supabase reference docs
  orpc/             # oRPC reference docs
  stripe/           # Stripe reference docs
  tools/            # Inngest + tool catalog + per-idea docs

webapp/             # Next.js 16 app (skeleton features pre-built)
supabase/           # Migrations + edge functions

Environment Variables

See webapp/.env.example for all required keys. Environment and account wiring should happen inside the relevant build flow, not through a separate default setup entrypoint.

Follow @speedy_devv

This template is part of the Build Kit ecosystem — starter kits that ship with their own AI dev team. Follow for updates, new kits, tutorials, and build-in-public content:

Instagram — instagram.com/speedy_devv

License

MIT — see LICENSE.md.