First Feature

You've got your idea, your app, and a landing page. Now you'll build your first real feature – and learn the loop you'll use for everything from here on: plan it with Claude, let it build, preview, refine, ship.

Keep this first one small and self-contained – no login, no database, no payments yet, just something genuinely useful your users can try. Those bigger pieces come in later levels.

We work straight on main

No branches, no pull requests yet – everything happens on your main branch and ships straight to your live site (Vercel auto-deploys, just like in Going Live). It keeps things simple while you find your rhythm. You'll learn branches later, if and when you need them.

1. Choose your first feature

Pick one small, valuable feature you can build without a database, accounts, or payments.

Pick a small first feature
Read my concept (in the docs folder). Then propose exactly 3 small first features that:
- deliver clear user value,
- work without a database, accounts, or payments (use local or mock data for now),
- produce something I can see and try right away.
For each, give a short name, what the user can do, and why it's a good first slice. Then ask me to pick one.

Outcome: You've chosen a small, self-contained first feature.

I chose a small first feature to build

2. Plan it with Claude (plan mode)

Before building, shape the feature together in plan mode. Switch Claude to plan mode (press Shift+Tab until it shows Plan mode) – in plan mode Claude thinks through the approach and proposes a plan without touching your code, so you can get it right before anything is built.

Plan the feature (in plan mode)
We're in plan mode. I want to build this feature: [describe the feature you picked].
Propose a simple plan for a first version:
- frontend-focused, using local or mock data – no database, accounts, or payments,
- built with our existing styling (Tailwind + shadcn/ui),
- shown on its own page or section, not replacing my landing page.
Ask me anything you're unsure about, then show me the plan before we build.

Read the plan, push back, and refine it with Claude until it matches what you want.

Outcome: You and Claude agree on a clear plan for the feature.

I shaped the feature with Claude in plan mode

3. Build it

Happy with the plan? Approve it and let Claude build. Switch out of plan mode (and turn on auto-accept with Shift+Tab) so Claude can write the code and run it without stopping at every step.

Build the plan
Go ahead and build the feature exactly as we planned. Keep it to this first version – no database, accounts, or payments. When it's working, start the dev server and show me the result in the preview.

Outcome: Claude builds your feature and shows it running in the preview.

Claude built the first version of my feature

4. Preview and refine

Your feature is in the preview – try it out. Tell Claude what to change (wording, layout, behavior) and watch it update live. Repeat until it feels right.

Give feedback and iterate
Here's my feedback on the feature: [what feels off / what you'd change]. Update it and show me again in the preview.

Outcome: The feature works the way you want it to.

I refined the feature until I was happy with it

5. Ship it

Once you're happy, ship it. Because you're working on main, committing and pushing sends it live automatically.

Commit and push to go live
Commit this feature with a clear message and push it to main so it goes live. Let me know once the deploy is done and the feature is on my live site.

Outcome: Your first feature is committed, pushed, and live for real users.

I shipped my first feature to my live site