Your first plan

Draft a phased plan in Plan mode, save it after approval, then build a Next.js and Tailwind snack poll one checkbox at a time.

Goal: walk one full loop. Plan mode produces a markdown plan (with phases and checkboxes), then you execute that file in small steps. Background: Plan before you build and Plans in markdown.

There is no separate scaffold step up front. If the plan needs a new Next.js app, Tailwind, or a route, that work shows up as early checkboxes inside the same plan.

What you are building

Snack poll One client-side page: three snack options (names can be hard-coded), one vote per browser, live counts, choice and tallies stored in localStorage, and clear UX so double-voting is not confusing.

Stack and design (non-negotiable in this exercise) The written plan must commit to Next.js, Tailwind CSS, and strong visual design using Claude’s /frontend-design slash command when implementing UI (same idea as Let's make it pretty: the command attaches the frontend-design skill so layouts, type, and color read as intentional).

Enter Plan mode

Start in Plan mode so source files stay unchanged while you draft and review the plan.

New session: claude --permission-mode plan
Already chatting: prefix the prompt with /plan or use Shift+Tab to cycle modes (see Plan before you build).

Draft and review the plan in chat

Plan mode blocks source-file creation. Ask for the complete markdown in chat; the model should not implement the app yet.

Tell Claude that the approved draft will later be saved as docs/snack-poll-plan.md. The plan must:

Use phases (bootstrap, layout, interactivity, persistence, polish, and so on).
Under each phase, use GitHub-style - [ ] tasks small enough for one focused agent turn.
State that implementation is Next.js + Tailwind.
Include design-oriented tasks that tell the implementer to use /frontend-design when building or refining the UI (for example: Implement the poll card layout using /frontend-design or Polish spacing and hierarchy with /frontend-design).

Example prompt (adapt names/paths if you like):

Return a markdown plan in chat that will later be saved as docs/snack-poll-plan.md. Plan a client-only snack poll: three options, single vote per user, counts, localStorage, no ambiguous double votes. Stack: Next.js and Tailwind CSS. If the repo is empty or not a Next app yet, put bootstrap tasks first (for example create-next-app, Tailwind setup, app route). Design: include phases or tasks that require using the /frontend-design slash command when doing visual work so the page looks distinctive and polished, not generic. Use phases and - [ ] checkboxes only. Do not write application code yet; only this markdown file.

Read the result. If tasks are huge or design steps omit /frontend-design, ask for a revision in Plan mode until it feels shippable in small slices.

Save the approved plan

Leave Plan mode (default or acceptEdits), then perform one file-only write that saves the approved text to docs/snack-poll-plan.md. Do not start application implementation in this turn.

Execute from the plan

Ground rules for the agent:

Rule	Detail
Source of truth	`docs/snack-poll-plan.md`
Pace	One checkbox (or one tight group in the same phase) per turn
Progress	After each done task, flip `- [ ]` to `- [x]`
Resume	New session: open the plan, continue from the first unchecked box
UI work	When a checkbox mentions `/frontend-design`, run that slash command (or equivalent) in the implementation step so design guidance is attached

Example execution prompt:

Open docs/snack-poll-plan.md. Complete only the next unchecked checkbox. If it is a UI task, follow the plan and use /frontend-design as written. When the task is verified, check it off and stop with a short summary.

Open docs/snack-poll-plan.md. Do only the next unchecked checkbox. If the box is UI, follow it and use /frontend-design. After it works locally, flip that line to [x] and stop, one short summary, no extra tasks.

If the model tries to batch too much:

Stop. Only the first unchecked item in phase [N]. Nothing else.

What you practiced

Plan mode first: with Next.js, Tailwind, and /frontend-design captured inside the plan, not as an afterthought.
Phases and checkboxes replace a giant single prompt; bootstrap is part of the same file when you start from zero.
Checkbox discipline keeps context narrow and makes it obvious how to resume later.

Reuse the same shape for other features: Plan mode, one markdown plan with phases, then execute with checkoffs and slash commands where the plan tells you to.