Skip to content
bits
Work with coding agents · Lesson 3 of 7 · 7 min

Plan, build, review

Tutor:

The biggest mistakes with coding agents happen before any code is written: the agent heads off in the wrong direction and you find out 400 lines later. The fix is a rhythm Anthropic teaches in Claude Code 101: explore, plan, code, commit.

Tutor:

Explore → plan → code → commit maps onto permission modes. Plan mode (Shift+Tab, /plan for one prompt, or claude --permission-mode plan) lets Claude read files and run exploratory commands but blocks edits until you approve the plan. Review the plan as you would a design doc: the files it'll touch, the approach, what it'll test. Redirecting a plan costs one message; redirecting a 400-line diff costs the diff.

Tutor:

Scope. One concern per task keeps diffs reviewable and makes failures attributable; /clear between tasks stops stale context steering the next one, and /compact with a focus keeps a long session on track.

Feedback loops. Give the agent an oracle with an exit code: a reproducing test (test-first, as Matt Pocock teaches), tsc --noEmit, a linter, a fixture diff. Demand evidence: the command and its output. For a second opinion, ask a reviewer that didn't write the code (Claude Code's /code-review, or a subagent, lesson 6).

Build it all vs Plan, then small stepsillustrative: made-up numbers that show the idea, not output from a real modelcompare

promptAdd a “closed today” banner to Moon Café's homepage

Build it all

Done! I've added the banner, refactored the hours module, renamed three helpers for consistency and updated the styles across the site. All looks good.

Plan, then small steps

Plan: 1) add isClosedToday() to src/hours.ts with a test, 2) show the banner in src/pages/home.tsx when it's true. Nothing else changes. After step 2: pnpm test → 14 passed. Ready to commit?

Tutor:

The left reply sounds productive, but you now have a sprawling diff and no proof. The right one did less, told you what it touched, and showed the test run.

Tutor:

Your turn. Brief an agent to add that "closed today" banner. Put the homepage in src/pages/home.tsx and the hours logic in src/hours.ts. Your brief should keep the scope tight (say what not to touch), name the check (pnpm test), ask for the test output as proof, and ask for the plan first.

Your turn

Goal Get a plan for one small change that names its files, stays in scope and ends with proof

What good looks likeThe coach checks the reply
  • Names the filesnot checked yet
  • Names the checknot checked yet
  • Asks for proofnot checked yet
  • Asks for a plan firstnot checked yet
  • Limits the scopenot checked yet
  • Ran at 1.0not checked yet
  • Replies with a plannot checked yet
  • Says what's out of scope, so the agent doesn't refactor around itnot checked yet
  • Asks to see the check's output, not just “done”not checked yet
  • The plan stays within the files the brief namesnice to have

Run your prompt and the replies land here.

    ~0 tokens

    Turn on JavaScript to run prompts.