# Quick Mvp

> 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.

- Skill: `koach08/quick-mvp` (Agent Skill)
- Install (CLI): `npx skillmds@latest add koach08/quick-mvp`
- Raw SKILL.md: https://api.skillmd.com/api/skills/koach08/quick-mvp/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: koach08 (https://skillmd.com/u/koach08)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/koach08/quick-mvp

---


# 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

```bash
# 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):

```env
# 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

```bash
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
```