Tip Splitter

Condensed from the real build session: every user prompt is shown; repetitive tool turns are trimmed. Scrub through it — the corrections are the curriculum.

• Small turns: scaffold → wire math → edge cases → polish. Four prompts, each reviewable.
• The agent's first version showed $NaN for an empty bill — saying "never show NaN" fixed the whole input-validation path in one turn.
• Rounding shares up means the table overpays by a few cents. Surfacing that ("tip it") beats silently absorbing it — an honest-UI decision the agent won't make unless you ask.

Paste this into Claude Code (or Codex, or Cursor) and compare what you get with the live version above. Changing one requirement and seeing what moves is the fastest way to learn the loop.

Build a tip splitter as a single React component (TypeScript).
Inputs: bill amount (text input, $ prefix), tip percent (preset chips: 10/15/18/20/25),
number of people (stepper with − and + buttons, min 1), and a "round each share up
to the cent" checkbox. Output: per-person amount large, tip total and table total small.
Handle invalid input by showing a neutral empty state, never NaN. When rounding up
causes the table to overpay, show the overpay amount instead of hiding it.