Build a pomodoro timer

A 25/5 timer that keeps time when you switch tabs.

Count down from 25, ring a bell, count down from 5, repeat. It's small enough to finish in an evening. The obvious build is quietly wrong, though, and you won't notice until you switch tabs to work.

A timer that loses seconds each cycle or freezes in a background tab is decoration, so most of this plan is about keeping time.

The spec and the cuts

• One HTML file. A 25/5 work/break timer, a small task list and a count of today's sessions.
• localStorage, sparingly. It holds only today's count.
• Cut: accounts and sync (it's a one-person, one-device tool), team features, and the analytics dashboard with its streaks and productivity scores.

The prompts

Tick what you want and the prompts below change to match. Paste them into Claude Code (or Cursor, or any agent) one at a time, in order. Prompt 2 checks the timing, fixes what it finds and adds no features.

Where agents go wrong

• Counting down a number every second. setInterval never fires at exactly 1000ms, so the error adds up over 25 minutes, and it stalls in a background tab. Compute remaining time from a target end-timestamp (endAt - Date.now()) on every tick.
• Trusting a background tab. Browsers throttle background timers, so a once-a-second interval may fire once a minute and the display freezes, then jumps. Recompute on visibilitychange and focus.
• Asking for permission on page load. Notifications and audio play() need a user gesture. Ask on load and the browser silently blocks them, so the first bell never rings. Ask inside the Start button's click handler.
• Two timers after pause. Pause leaves the old interval running, resume starts another, and the countdown goes double speed. Keep one interval id and always clearInterval before starting a new one.

Why prompt 4 is in the plan

You know what the bell means and nobody else does. Prompt 4 connects your agent to my MCP server, which shares the live page so a person or two can pin notes on it. Ask them whether they can tell work from break at a glance and whether the notification feels like a relief or a jump-scare. Your agent applies the notes you approve.