Build a Pomodoro timer app

A Pomodoro timer web app with an animated progress ring, custom work and break lengths and a task list.

You'll attach

Text only

Works with

CursorClaude CodeCodexClaudeChatGPTGemini

How to use it

1. Open Cursor or Claude Code in your terminal (or another AI listed here).
2. Fill in the highlighted blanks ([WORK INTERVALS], [SHORT BREAKS], [LONG BREAKS]) below, or edit them after pasting.
3. Copy the prompt, paste it into the chat and send.

Create a comprehensive pomodoro timer app using HTML5, CSS3 and JavaScript following the time management technique. Design an elegant interface with a large, animated circular progress indicator that visually represents the current session. Allow customization of work intervals (default [WORK INTERVALS]), short breaks (default [SHORT BREAKS]), and long breaks (default [LONG BREAKS]). Include a task list integration where users can associate pomodoro sessions with specific tasks. Add configurable sound notifications for interval transitions with volume control. Implement detailed statistics tracking daily/weekly productivity with visual charts. Use localStorage to persist settings and history between sessions. Make the app installable as a PWA with offline support and notifications. Add keyboard shortcuts for quick timer control (start/pause/reset). Include multiple theme options with customizable colors and fonts. Add a focus mode that blocks distractions during work intervals.