Vibecode build plans · № 2
Build a habit tracker
One file, localStorage, a heatmap — and the midnight bug your agent will write if you let it.
Every habit app you've abandoned died the same death: it asked you to open an app. The tracker you'll actually use is the one that loads instantly, works offline, asks for exactly one tap, and belongs to you. That's a single HTML file with localStorage — which happens to be a perfect one-evening vibecode.
It's also a build with one famous landmine. Streak math and calendar rendering involve dates, and agents reliably reach for UTC — which means your streak dies at 5 p.m. or survives until 8 a.m. depending on where you live. This plan defuses that in the spec, and then makes prompt 2 prove it.
The spec — and the cuts
- One HTML file, localStorage only. Your data never leaves your machine. Export is a JSON download, not a login.
- One habit by default. Opinionated cut: trackers die of ambition. Track the one thing; add habits only if the toggle below says so.
- One tap for today. A big "done today" button is the whole interface. The heatmap is the reward, not the input.
- Cut: accounts, cloud sync, notifications (a permission prompt is how you get uninstalled), chart libraries, confetti.
The prompts
Tick what you want — the prompts rewrite themselves — then paste into your agent one at a time, in order.
Every toggle edits the prompts. The copy buttons grab the current version.
1 · Build it
2 · Prove the dates are right (don't skip this one)
3 · Put it where you'll open it
4 · Get human eyes on it
Where agents go wrong on this build
- The midnight bug.
new Date().toISOString()is UTC, and any streak computed from it breaks at your timezone's offset from Greenwich. Days must be local date strings, full stop. This is the most common real bug in vibecoded trackers — hence prompt 2. - Clever state. Agents love nested objects with derived
fields cached inside. A tracker needs a flat map of
date → doneand nothing else; streaks are computed, never stored. - Trusting localStorage. It can be cleared, corrupted, or
full. One
try/catcharound the parse and a versioned key (habits-v1) is the difference between "weird, it reset" and a crash on open. - Heatmap off-by-ones. Week alignment (does the year start mid-column?), leap days, and month labels drift one cell in most first attempts. Prompt 2 checks the corners by name.
- Gamification creep. Badges, levels, streak-freeze tokens. Every one is a reason the page loads slower. The product is the unbroken row of green — leave it alone.
Why the feedback step is in the plan
A tracker has an audience of one — but that one person hasn't used it yet either. The questions that decide whether this survives to week two ("is today's state obvious at a glance? is the button where my thumb is?") are answerable by any friend with a phone in thirty seconds. Prompt 4 wires your agent to our MCP server: it shares the live page, someone pins notes right on it, and your agent applies what you approve.