vibe-ship

Take a vibe-coded frontend to a live SaaS — database, auth, email, and deployment in one flow.

Supported stacks

• Next.js (App Router)
• Vite + React

1. Detect framework

Check the project root for config files:

• next.config.js or next.config.ts present → set FRAMEWORK=nextjs
• vite.config.ts or vite.config.js present → set FRAMEWORK=vite

If neither config file is found, check package.json dependencies:

• "next" in dependencies → FRAMEWORK=nextjs
• "vite" in dependencies → FRAMEWORK=vite

If still ambiguous, ask: “Is this a Next.js or Vite/React project?”

2. Confirm with the user

Print:

Detected: <framework> project

Ready to set up:
  ✦ Supabase database
  ✦ Auth + magic link email via Resend
  ✦ Frontend connected to live data
  ✦ Frontend polished (loading states + responsive)
  ✦ Deploy to Vercel

Shall we begin? (yes/no)

If the user says no → stop here.

3. Run each step in order

Pass FRAMEWORK as context to every sub-skill call.

Step 1 — Database Invoke supabase-setup. Do not proceed until it reports: “✓ Supabase setup complete. Database schema written and client configured.”

Step 2 — Auth + Email Invoke auth-setup. Do not proceed until it reports: “✓ Auth setup complete. Magic link email delivered via Resend.”

Step 3 — Connect frontend Invoke frontend-connect. Do not proceed until it reports: “✓ Frontend connected to Supabase. Mock data replaced with live queries.”

Step 4 — Polish Invoke frontend-polish. Do not proceed until it reports: “✓ Frontend polished. Loading states, error boundaries, and responsive layout confirmed.”

Step 5 — Deploy Invoke vercel-deploy. Do not proceed until it reports: “✓ Deployed. Live at: “

4. Done

Print:

🚀 Your app is live!

URL: <live URL from vercel-deploy>

What's next:
- Add your custom domain: Vercel → Settings → Domains
- Set up Stripe payments when you're ready to charge users
- Monitor errors: Vercel → Logs