Plan It Visually

Before writing code, deliver the implementation plan as a single self-contained HTML file the reader can open and review in one pass.

1. Output ONE .html file with all CSS and JS inline — no external assets, so it opens anywhere.
2. Lead with a short summary: the goal, the approach in 2-3 sentences, and the main risks or open questions.
3. Mock up each screen or state with plain HTML/CSS boxes, not images. Label the controls and note what each does.
4. Draw the data flow — how a request moves from UI to API to data store and back. Inline SVG or a labeled box-and-arrow layout is enough.
5. Show only the code worth reviewing: signatures, data shapes, tricky logic. Skip boilerplate.
6. Break the work into ordered, checkable steps, each with a one-line note on why it comes when it does.
7. Optimize for skimming: clear headings, generous spacing, a table of contents, readable in light and dark.
8. Stop after the plan. Do not start implementing until the reader has reviewed it.