quick-mvp

name	quick-mvp
description	Scaffold a new SaaS/app from scratch. Auto-generates a Next.js 16 + Supabase + Stripe + Tailwind CSS 4 boilerplate. Use when starting a new app or SaaS project from scratch.
allowed-tools	["Read","Write","Edit","Bash","Grep","Glob","Agent","WebSearch"]

Quick MVP — New App Scaffold

Spin up a new SaaS / app project as fast as possible.

---

Default Stack

Layer	Technology
Frontend	Next.js 16 (App Router)
Styling	Tailwind CSS 4
DB	Supabase (PostgreSQL + Auth)
Payments	Stripe
Deploy	Vercel
Language	TypeScript

If the user specifies a different stack, follow their preference.

---

Process

Step 1: Quick Interview

Confirm the following (only what's known is fine):

• App name
• One-line description — what the app does
• Target users — who uses it
• Auth — needed? (Supabase Auth / Clerk / none)
• Payments — needed? (Stripe / Gumroad / none)
• Port number — to avoid conflicts with other projects
• Project directory — where to create the project (default: current directory)

Step 2: Generate Project

# Location: {project-directory}/{app-name}/
npx create-next-app@latest {app-name} --typescript --tailwind --app --src-dir --import-alias "@/*"

Step 3: Base Structure

Generate the following files and directories:

src/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   ├── globals.css         # Tailwind CSS
│   ├── api/
│   │   └── health/route.ts # Health check
│   ├── (auth)/
│   │   ├── login/page.tsx
│   │   └── signup/page.tsx
│   └── dashboard/
│       └── page.tsx
├── components/
│   └── ui/                 # Shared UI components
├── lib/
│   ├── supabase/
│   │   ├── client.ts       # Browser client
│   │   └── server.ts       # Server client
│   └── stripe.ts           # Stripe config
└── types/
    └── index.ts

Step 4: Environment Variables

Create .env.local (values empty, with comments):

# Supabase
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=

# Stripe (if payments enabled)
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_WEBHOOK_SECRET=

Add .env.local to .gitignore.

Step 5: Configuration

• next.config.ts — image domains, etc.
• package.json — set dev script port number if specified
• Prepare for Vercel linking (vercel link instructions)

Step 6: Initial Commit

git init
git add .
git commit -m "Initial MVP scaffold: {app-name}"

---

Design Guidelines

• Do NOT use shadcn/ui defaults as-is (customize them)
• Decide brand colors first
• Dark mode can wait (light mode first)
• Mobile-first

---

Output

After generation, display:

## {app-name} MVP Complete

Location: {project-directory}/{app-name}/
Start: cd {path} && npm run dev
Port: {port}

### Next Steps
1. Create Supabase project -> fill in .env.local values
2. Set up Stripe account (if payments enabled)
3. Run vercel link to connect project
4. Start building your first feature