Project scaffold

This placeholder home page is a checklist for turning the template into your product. Work through the steps below in order — each one shows what to do and the exact prompt to paste. Delete this page once you build the real landing page.

5 of 5 trackable steps complete.

✓
Step 1 — Write the PRD
Done
Jot a rough brief, then ask your coding agent to draft the PRD with you.
docs/PRD.md has been written.
Show the prompt
Paste this to your coding agent
Read docs/project_start/01-writing-the-prd.md and run the PRD interview. Here's my brief: <paste your brief>
Full walkthrough: docs/project_start/01-writing-the-prd.md.

Step 2 — Design it in Claude Design

Not tracked

Brief Claude Design with the prompt below, shape the prototype, and ask it to prepare the repo files. When you drop them into intake/, your coding agent checks the export and hands back a fix-list if anything needs re-exporting.

Happens in a Claude Design session — it leaves no trace in the repo, so this page cannot check it.

Show the prompt

Paste this to Claude Design

I've attached my product spec (docs/PRD.md) and the handoff contract (docs/project_start/02-briefing-claude-design.md). Build the design package first, then the product prototype, following that contract's export format exactly — especially the Tailwind-native spacing scale and a shared token vocabulary across both. Use real on-brand copy and render the key empty/loading/error states, one .jsx file per screen with matching screenshots and a SCREEN_MANIFEST. Then return docs/DESIGN_TOKENS.md, docs/COMPONENT_SPEC.md, and the brand-voice content in the shapes the contract specifies.

Full walkthrough: docs/project_start/02-briefing-claude-design.md.

✓
Step 3 — Insert the design into the repo
Done
Unzip Claude Design’s whole bundle into the intake/ folder, then ask your coding agent to sort it into the repo and wire it in. It runs a design doctor and hands back a fix-list if the export needs re-doing.
Design tokens, component spec, and the design package are all in place.
Show the prompt
Paste this to your coding agent
Read docs/project_start/03-inserting-the-design.md, sort the bundle I dropped into intake/, and wire in the design.
Full walkthrough: docs/project_start/03-inserting-the-design.md.
✓
Step 4 — Wire the services
Done
Create the Vercel and Supabase accounts and paste the secrets into your .env, then ask the coding agent to finish the wiring.
Supabase credentials found in the environment. Vercel env and GitHub settings are applied outside this build — ask the coding agent to confirm them.
Show the prompt
Paste this to your coding agent
Apply the repo settings and confirm the Supabase connection.
Full walkthrough: README.md#step-4--wire-the-services.
✓
Step 5 — Name your app
Done
Tell the coding agent your app’s name and one-line description.
The app has a real name in its metadata and package.json.
Show the prompt
Paste this to your coding agent
Name this app "<Your App Name>" — <one-line description>. Update the web metadata and the root package name.
Full walkthrough: README.md#step-5--name-your-app.
✓
Step 6 — Kick off the build
Done
Ask the coding agent to write the roadmap from your PRD and prototype.
docs/ROADMAP.md is written; docs/DATA_CONTRACT.md is still the placeholder (the opening build phases derive it).
Show the prompt
Paste this to your coding agent
Read docs/project_start/04-writing-the-roadmap.md, then write docs/ROADMAP.md for this product, following docs/PRD.md and the prototype in reference/prototype/.
Full walkthrough: docs/project_start/04-writing-the-roadmap.md.

Step 1 — Write the PRD

Step 2 — Design it in Claude Design

Step 3 — Insert the design into the repo

Step 4 — Wire the services

Step 5 — Name your app

Step 6 — Kick off the build