Build Walkthrough Generator with AI

# Build Walkthrough Generator — SoloStack Skill File
> Drop this file into your SoloStack repo and Claude Code will use it as
> context to run this workflow automatically.
---
## Overview
Generate a beginner-grade build plan where every step is one URL, one click-path, and one checkpoint. Bridges PRDs and tech specs to actually-do-it instructions a non-developer can ship — Supabase, Stripe, Neon, Netlify, all named, all linked, all verifiable.
## Capabilities
1. **Per-Step URL Targeting** — Every step starts with the exact URL to open. Not 'go to your Supabase dashboard' but 'open https://supabase.com/dashboard/project/_/auth/providers'. You click the link, you're on the right page, you move on. No menu archaeology.
2. **Click-Path Precision** — Each step specifies exactly what to click, in what order, and what value to copy. 'Click "Email" in the provider list. Toggle "Enable Email Provider" to ON. Click "Save" at the bottom.' No 'configure email auth' hand-waving.
3. **Built-In Checkpoints** — After every cluster of steps there's a verification: 'You should now see a logged-in user in https://supabase.com/dashboard/project/_/auth/users'. If you don't, you stop and fix before moving on. Errors don't compound.
4. **Failure Recovery Branches** — Common errors get inline rescue steps. 'If you see "Invalid API key", the value you pasted has a trailing space — re-copy from the dashboard.' You're never stuck wondering whether you broke it or the docs are stale.
5. **Frontend + Backend Interleaved** — Not 'do all backend first, then frontend'. The walkthrough alternates: set up auth in Supabase, then add the login button in Astro, then verify both work together. Every couple of steps you can SEE progress in the browser.
6. **Resumable Sections** — Every phase has a unique section ID. If you stop after step 12, tomorrow you re-open the walkthrough at 'Phase 3, step 13' — no re-reading the whole document. Each section is self-contained enough to pick up cold.
## Pipeline
1. **Capture the Build Target** — One-line description of what you're building — 'a course portal with email login and progress tracking', 'a CRM with Stripe payments', 'a booking page wired to Google Calendar'
2. **Lock the Stack** — Decide the exact services (Supabase auth + Neon DB + Astro + Netlify + Stripe) — no ambiguity, no 'or you could use X'
3. **Split into Phases** — Group work into 4-7 phases: account setup → schema → auth → CRUD → frontend → deploy → verify. Each phase has its own resumable section
4. **Atomic Steps** — Break every phase into atomic steps. One step = one URL to open + one action (click / copy / paste / run) + one expected result
5. **Insert Checkpoints** — After every 3-5 steps, add a 'you should now see X' verification. If you don't see X, you stop and fix before continuing
6. **Add Recovery Branches** — Common failure points get an inline 'if you see this error, do this' branch. No dead ends, no 'figure it out yourself'
## Use Cases
- **First-Time Supabase + Stripe Setup:** You've never set up Supabase or Stripe before. The walkthrough takes you screen-by-screen from creating the project to having a working signup + checkout, with every dashboard URL and every key copy-paste spelled out.
- **Course Portal in a Weekend:** Specifically structured for the SoloStack course portal pattern: Supabase email auth + Neon progress tracking + Astro frontend + Netlify deploy. About 30 atomic steps, doable in 8-12 focused hours.
- **Adding Auth to an Existing Site:** Your landing page exists, but you want to add login. The walkthrough produces the additive plan — only the steps you need to bolt auth onto a project that's already deployed.
- **Recovery from a Half-Done Tutorial:** You followed a generic tutorial halfway, hit a wall, and don't know which steps to redo. Paste in what you've completed and the walkthrough produces the diff: 'you've done steps 1-9, here's 10-23.'
## Warnings
- Cloud dashboards change their UI every few months — if a step's button has been renamed, ask Claude Code to re-look the current UI and update that step
- URLs in the walkthrough use the placeholder /project/_/ — Supabase auto-substitutes your project ID when you're logged in, but if it doesn't, replace _ with your project ref
- Checkpoints are the safety net — don't skip them. The whole system breaks down if you move on without verifying
- If you're already comfortable with a service (e.g. you've used Stripe ten times), the walkthrough will feel slow. Switch to the technical-spec-writer skill instead — it skips the click-paths
## Sample Output
```json
{
  "phase": 3,
  "step": 7,
  "title": "Set up Supabase email auth",
  "open_url": "https://supabase.com/dashboard/project/_/auth/providers",
  "actions": [
    "Find 'Email' in the provider list (top of the page)",
    "Toggle 'Enable Email Provider' to ON (it goes green)",
    "Scroll to 'Email signup' — toggle 'Confirm email' to OFF for now",
    "Click 'Save' at the bottom of the page"
  ],
  "checkpoint": {
    "verify_url": "https://supabase.com/dashboard/project/_/auth/users",
    "expected": "page shows '0 users' with an 'Add user' button visible",
    "failure_branch": "if you see 'Email auth disabled', the toggle didn't save — re-open the providers page and verify the green indicator"
  },
  "copy_values": [],
  "paste_into": [],
  "next_step": 8,
  "can_skip_if": "you already see users in the auth/users dashboard"
}
```
Download the complete skill file with full implementation details,
agent prompts, and ready-to-run scripts.