chriswestt/claude-skills

/saas — Full-Stack SaaS Builder

Trigger: /saas [idea] or just /saas (will prompt for idea)

Output: A fully deployed, production-ready SaaS at a Vercel URL. Working auth, real backend, live data, beautiful UI. Not a demo. Not a scaffold. A real product.

---

PIPELINE OVERVIEW

INTAKE → RESEARCH (parallel) → PLAN → CLARIFY → BUILD → TEST → REVIEW → DEPLOY

Each phase gates the next. No shortcuts. No skipping.

---

PHASE 1 — INTAKE

If the user ran /saas [idea], extract the idea from the command. If they ran /saas with no argument, ask:

What's the SaaS idea? Describe it in 1-3 sentences. Include:
- What it does
- Who it's for
- What problem it solves

Store as IDEA. Confirm back in one sentence before proceeding.

---

PHASE 2 — PARALLEL RESEARCH

Spin off two research tracks simultaneously using the Agent tool. Do NOT wait for one before starting the other.

Track A — Market Intelligence

Spawn a general-purpose agent with this prompt:

Research the SaaS market for this idea: [IDEA]

Deliver a structured report covering:

1. EXISTING PLAYERS (5-8 competitors)
   - Name, URL, pricing tiers, positioning
   - What they do well, what they miss
   - Estimated ARR if available

2. MARKET SIZE & DEMAND
   - Category (CRM, project mgmt, analytics, etc.)
   - Market size estimate
   - Growth trend (growing/flat/declining)
   - Evidence of demand (Reddit threads, ProductHunt upvotes, job postings)

3. PRICING BENCHMARKS
   - Freemium vs paid-only vs trial
   - Typical price points ($/user/mo, flat, usage-based)
   - Which models win in this category

4. FEATURE TABLE
   - List the 10 most common features across competitors
   - Mark which ones are table-stakes vs differentiators

5. WHITE SPACE
   - What are competitors NOT doing?
   - Where do users complain? (check G2, Capterra, Reddit)
   - What's the wedge opportunity?

Return structured markdown. Be specific. No fluff.

Track B — Technical Pattern Research

Spawn a second general-purpose agent:

Research the technical implementation patterns for this type of SaaS: [IDEA]

Deliver:

1. DATA MODEL PATTERNS
   - What tables/entities does this type of app typically need?
   - Key relationships and constraints
   - Multi-tenancy approach (row-level org_id vs separate schemas)

2. AUTH PATTERNS
   - Does this type of app need social login? Magic link? SSO?
   - Invite-only vs open signup?
   - Role patterns (admin/member/viewer typical?)

3. BILLING PATTERNS
   - Per-seat, usage-based, or flat?
   - Free tier strategy that works in this space?

4. INTEGRATION NEEDS
   - What do apps in this category typically integrate with?
   - Webhooks, Zapier, API keys?

5. TECHNICAL RISKS
   - What's hard to build in this category?
   - What do teams get wrong?
   - Performance/scale considerations

Return structured markdown. Be specific.

Wait for BOTH tracks to complete before proceeding.

---

PHASE 3 — ARCHITECTURE PLAN

Using both research outputs, produce a structured build plan. Write this to .saas-workspace/[project-slug]/PLAN.md.

The plan must include:

3.1 Product Definition

## Product
Name: [derived from idea, can be changed]
Tagline: [one line]
Core value prop: [one sentence]
Target user: [specific persona]

## MVP Feature Set (what we're building TODAY)
- [Feature 1] — [why it's in scope]
- [Feature 2] — [why it's in scope]
...

## Out of Scope (v1)
- [Feature] — [defer to v2 because...]

3.2 Data Model

Design the complete Postgres schema. For every table:

• Table name, purpose
• All columns with types, constraints, defaults
• Foreign key relationships
• RLS policies needed
• Indexes

Start with these required tables:

-- Always include:
profiles (extends auth.users)
organizations (if multi-tenant)
organization_members (if multi-tenant)
subscriptions (if billing)

Then add domain-specific tables for the product.

3.3 Route Map

Landing page:      /
Auth:              /login  /signup  /auth/callback
App shell:         /app (requires auth)
Core features:     /app/[feature] (one per MVP feature)
Settings:          /app/settings
API routes:        /api/... (list each)

3.4 Tech Stack Confirmation

Framework:    Next.js 15 (App Router, TypeScript)
Database:     Supabase (Postgres + Auth + RLS)
Styling:      Tailwind CSS v4 + shadcn/ui
Email:        Resend (transactional)
Deploy:       Vercel
Payments:     Stripe (if billing needed)

3.5 Build Order

List the exact sequence: migrations → auth → API routes → app shell → features → landing page → email templates → tests.

---

PHASE 4 — CLARIFYING QUESTIONS

Before writing a single line of code, surface gaps. Use AskUserQuestion to ask the following (group into max 4 questions per call):

Round 1 — Product Scope:

1. Confirm the name (present 3 options derived from the idea)
2. Multi-tenant (teams/orgs) or single-user accounts?
3. Does v1 need payments/billing, or is it free while building?
4. Any specific features from the research that are must-haves vs nice-to-haves?

Round 2 — Design & Deployment (only ask if answers from Round 1 raise new questions):

• Domain? (or use Vercel subdomain for now)
• Any brand colors / preferences? (default: Rawgrowth dark green system)
• Email sender address for Resend?

Incorporate answers into the PLAN.md before proceeding.

---

PHASE 5 — BUILD

Pre-Build Setup

Load these skills before writing any code:

1. frontend-theme — injects full Rawgrowth design system
2. ui-ux-pro-max — design decisions, palette, typography
3. Invoke Magic MCP (@21st-dev/magic) for any complex components

Project location: Create at ~/saas-projects/[project-slug]/

Scaffold command:

cd ~/saas-projects
npx create-next-app@latest [project-slug] \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*" \
  --no-git
cd [project-slug]

Install dependencies:

npm install @supabase/supabase-js @supabase/ssr \
  resend \
  @radix-ui/react-icons \
  lucide-react \
  class-variance-authority clsx tailwind-merge \
  zod \
  @hookform/resolvers react-hook-form

# shadcn/ui init
npx shadcn@latest init --defaults

# Add shadcn components
npx shadcn@latest add button input label card \
  dropdown-menu avatar badge separator toast \
  dialog sheet tabs form

Tailwind v4 config — apply frontend-theme tokens to src/app/globals.css.

---

5.1 Database & Migrations

Use the add-migration skill for each migration.

Migration 1: Core schema

-- Enable RLS on all user-facing tables
-- profiles: extends auth.users
CREATE TABLE profiles (
  id UUID REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
  email TEXT NOT NULL,
  full_name TEXT,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can view their own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update their own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Auto-create profile on signup
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.profiles (id, email, full_name, avatar_url)
  VALUES (
    NEW.id,
    NEW.email,
    NEW.raw_user_meta_data->>'full_name',
    NEW.raw_user_meta_data->>'avatar_url'
  );
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

Migration 2: Organizations (if multi-tenant)

CREATE TABLE organizations (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  plan TEXT DEFAULT 'free',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE organization_members (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  org_id UUID REFERENCES organizations(id) ON DELETE CASCADE NOT NULL,
  user_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('owner', 'admin', 'member')),
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(org_id, user_id)
);

ALTER TABLE organizations ENABLE ROW LEVEL SECURITY;
ALTER TABLE organization_members ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Members can view their org"
  ON organizations FOR SELECT
  USING (id IN (
    SELECT org_id FROM organization_members WHERE user_id = auth.uid()
  ));

CREATE POLICY "Members can view org membership"
  ON organization_members FOR SELECT
  USING (org_id IN (
    SELECT org_id FROM organization_members WHERE user_id = auth.uid()
  ));

Migration 3+: Domain tables — create product-specific tables per the data model in PLAN.md. Apply RLS to every table.

---

5.2 Supabase Client Setup

src/lib/supabase/client.ts:

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}

src/lib/supabase/server.ts:

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClient() {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return cookieStore.getAll() },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options)
            )
          } catch {}
        },
      },
    }
  )
}

src/middleware.ts — protect all /app/* routes, redirect unauthenticated users to /login.

---

5.3 Auth Pages

Build /login and /signup as full pages (not modals). Apply frontend-theme:

• Dark background (#060B08)
• Centered card with border (rgba(255,255,255,0.06))
• Green CTA buttons (#0CBF6A)
• Email + password fields (+ social login if configured)
• "Forgot password" link
• No emojis. Clean, premium, minimal.

src/app/(auth)/login/page.tsx — login form with Supabase Auth src/app/(auth)/signup/page.tsx — signup form with email confirmation flow src/app/auth/callback/route.ts — OAuth/magic link callback handler

Email confirmation flow:

• On signup → Supabase sends confirmation email (via Resend SMTP)
• Callback route exchanges code for session
• Redirect to /app/dashboard on success

---

5.4 App Shell

src/app/(app)/layout.tsx — authenticated layout with:

• Sidebar (collapsible on mobile)
• Top nav with user avatar + dropdown (profile, settings, sign out)
• Breadcrumbs
• Toast notification outlet

Sidebar items derived from route map in PLAN.md.

Use Magic MCP to fetch a sidebar component: search for "dashboard sidebar dark" and adapt to frontend-theme tokens.

---

5.5 Core Feature Pages

For each feature in the MVP feature set (from PLAN.md):

1. Design first — query Magic MCP for relevant component patterns
2. Data layer — server components fetch from Supabase directly
3. Mutations — Server Actions with Zod validation
4. Error states — every form has validation errors, loading states, empty states
5. No any types — generate TypeScript types from Supabase schema

Pattern for data-fetching server component:

import { createClient } from '@/lib/supabase/server'
import { redirect } f