First run

The goal of this step is plain. Without touching an external service, see the SaaS skeleton paint itself onto http://localhost:5173 on your own machine. Supabase and Stripe come in next. Usually wraps under 40 minutes.

1) Run Claude Code in the base folder

If 02-clone-and-install.md ended with cd my-saas, stay in that folder and run:

claude

When the Claude Code prompt comes up, it reads CLAUDE.md and the automation rules silently. Nothing much shows on screen — that is fine.

2) One line to begin

Type this into the Claude Code prompt:

/start

Or in natural language: start project setup. Either way, it triggers the start router skill. The router auto-detects the current stage (empty → paced → analyzed → designed → customized → implemented → built → deployed — one of those) and points to the next slash command from that seat.

On the very first run, the stage is empty, and the router suggests /1-pace.

3) /1-pace — pick a rhythm

When /1-pace runs, one question shows up:

How would you like the development experience to feel?

• novice (one question at a time)
• experienced (related questions bundled into groups of 2–3)

If this is your first time, novice is the safer pick. The AI walks the decision questions from phase 3 and 4 (concept, routing mode, pricing model, data schema) one at a time. experienced asks the same questions in bundles. Both routes reach the same decisions — the rhythm differs.

Your answer gets stored in .claude/state/user-pace.json. Every phase from here on rides on that rhythm.

4) While the AI works through phases 1 and 2

The router takes care of the following on its own:

• Calls phase /2-setup-base — confirms the stack skeleton (Vite + React + TS + React Router + FSD six layers + ESLint boundaries + jsx-a11y + a Supabase client placeholder + a Stripe SDK placeholder + the api/ folder). Since the base is already in place, almost nothing gets newly created — it is a verification pass.
• Auto-generates the empty templates — .claude/session-state/archive/active.md, .claude/state/progress.md, .claude/agent-memory/MEMORY.md, and so on.

A line like Phase 2 setup-base complete rolls past on screen. Depending on your machine, this takes 2–5 minutes.

Phases 3 through 6 (concept analysis, design decisions, customization, residue cleanup) sit outside the first run. This step stops after phase 2 clears, at the seat where you bring up the dev server.

5) Bring up the Vite dev server

pnpm dev

A block like this drops in the console:

  VITE v5.x.x  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open the URL printed after Local: in a browser. The placeholder landing screen the base ships with should appear — one header row, three skeleton pricing cards, and the signup and login links. Your SaaS name and concept are not painted in yet. Those get filled in during phases 3 and 5.

Screenshot

The actual capture lands later through the docs-screenshot skill. Seat: static/img/saas-base/beginner/first-run-01-vite-localhost.png.

If the browser shows a blank screen and the console prints a red line, it is usually one of two things:

• pnpm install did not finish cleanly. Open a fresh terminal, run pnpm install once more, then start pnpm dev again.
• Port 5173 is held by another process. If the console mentions a different port (5174, 5175, and so on), open that URL instead.

6) Skim src/ once

Once you are here, it pays to glance at the folder shape the base carries:

src/
├── app/                ← main.tsx, App.tsx, providers, router
├── pages/              ← landing, pricing, auth, app (protected), checkout-result
├── widgets/            ← site-header, site-footer, pricing-grid, app-shell
├── features/           ← sign-in, sign-up, checkout, manage-subscription, require-auth
├── entities/           ← User, Subscription, Plan, Invoice
└── shared/             ← ui, lib, api, config
api/
├── functions/          ← Edge Functions (Deno runtime)
└── migrations/         ← RLS policies as SSOT

You do not need to understand every line of this tree yet. When you want to change something, the fastest path is usually to tell Claude Code in plain words what you want different. The mapping from intent to file already lives in the AI.

The folders under src/ are skeletons through phase 5 (/5-customize-saas). The route tree, the domain entities, the body copy on the pricing page — all placeholders. The shape of your SaaS lands at phase 5.

Where next

If you want to go to	Where in this manual
Supabase wiring and your first migration	04-real-backend.md
Pin down a concept, routing, pricing, and data schema	Tell Claude Code “start concept analysis” or /3-analyze-saas
Repaint branding and design tone	05-customize-design.md
Something is broken	09-troubleshooting.md

If you are unsure, step 04 is the safe default. Without Supabase wired up, the signup and login flow only runs against placeholders, and the checkout flow stops at a mock screen. Once 04 goes through, the concept and data decisions in phases 3, 4, and 5 land on real ground.