Skip to content
Claude Code Build Playbook

Workflow Spine

The canonical sequence for a first build, end-to-end. Use this as the scan-it-quickly reference; the deep-dive sections that follow expand on individual steps.

How to read the spine

Section titled “How to read the spine”

Where = which surface you act on. Actor = who or what executes the step. The notation human → claude-code means you send a prompt; Claude Code does the work. Section references in the Notes column are clickable.

The 25 steps fall into four phases. Use the tabs below to focus on one phase at a time.

Provider accounts, Claude Code install, project folder, and auth — everything before you talk to Claude Code.

  1. 01

    Set monthly spend caps

    Where
    Provider dashboards
    Actor
    human

    Instructions

    • Open each paid AI provider dashboard
    • Set a hard monthly USD cap before generating any keys
    • $50 / $50 / $25 is a sensible starter for OpenAI / Anthropic / Perplexity

    Verification

    • Cap visible in each provider's billing settings

    Notes

    • Do this BEFORE step 02 — a runaway loop on an uncapped key can cost thousands
  2. 02

    Generate external API keys

    Where
    Provider dashboards
    Actor
    human

    Instructions

    • Generate keys in each provider dashboard you'll use
    • Copy each key into a secure note temporarily
    • Keys typically: OPENAI_API_KEY, ANTHROPIC_API_KEY, PERPLEXITY_API_KEY

    Verification

    • Each key copied; provider shows it as active

    Notes

    • Real values go into .env.local in step 11, not now
  3. 03

    Create Supabase project + copy keys

    Where
    Provider dashboards
    Actor
    human

    Instructions

    • Create new project at supabase.com
    • Copy: Project URL, anon public key, service_role secret key
    • Note the project's region for latency

    Verification

    • All three values copied to your secure note

    Notes

    • Skip if your project doesn't need a database — use Simple Bootstrap instead
  4. 04

    Install Claude Code globally

    Where
    Mac Terminal
    Actor
    human

    Instructions

    • npm install -g @anthropic-ai/claude-code
    • Or upgrade if already installed

    Verification

    • claude --version prints a version number

    Notes

    • Requires Node 20+. brew install node if needed
  5. 05

    Authenticate Claude Code

    Where
    Mac Terminal
    Actor
    human

    Instructions

    • Run: claude login
    • Follow the browser flow

    Verification

    • claude prints your account on next launch

    Notes

    • Uses your Anthropic console plan, not a separate API key
  6. 06

    Create project folder

    Where
    Mac Terminal
    Actor
    human

    Instructions

    • mkdir ~/projects/<name> && cd ~/projects/<name>
    • Pick a folder name without spaces

    Verification

    • pwd confirms you're in the new folder
  7. 07

    Launch Claude Code in the folder

    Where
    Mac Terminal
    Actor
    human

    Instructions

    • Run: claude
    • Wait for the prompt

    Verification

    • You see the Claude Code interactive prompt

Recurring patterns (after first build)

Section titled “Recurring patterns (after first build)”

Common follow-ups once your project is shipped. Each pattern reuses surfaces from the spine above.

  • Add a feature

    Write docs/features/<name>.md in editor → paste prompt referencing it in Claude Code → review the diff → commit → push. Vercel auto-deploys.

  • Update PRD scope

    Edit docs/prd.md in editor → tell Claude Code to re-read it and confirm understanding before any new code. Catches scope drift early.

  • Rotate a key

    Generate new key in provider dashboard → revoke old → update .env.local in editor → update Vercel env vars (toggle Sensitive) → redeploy. Commit nothing.

  • Roll back a bad prompt

    If Claude Code's last commit went sideways: git reset --hard HEAD~1 in terminal. This is why per-prompt commits matter.