twenty-five minutes, then stop.
a pomodoro timer is a countdown that alternates. the irony of the category is that the apps built for focus are full of the things that break it: accounts, streaks, statistics, a premium tier, and a tab that animates.
the useful version is a number counting down and a sound when it stops.
your intervals, your break lengths, one screen. it is a minute of work and it is the most-opened page most people make.
a countdown that alternates.
01 / what it isthe technique is the whole product and the software should be almost nothing. what makes a custom one better is that it has your intervals — twenty-five and five if that works for you, fifty and ten if it does not — and that there is nothing else on the screen to look at.
the single most useful implementation detail is putting the remaining time in the tab title, so you can see it from whatever you are actually working in without switching tabs and losing the thread.
- your work and break lengths, not somebody else’s
- automatic alternation, with a longer break where you want one
- the remaining time in the tab title
- a sound at the end you can turn off
- a count of today’s sessions, if that helps you
- nothing else at all
- what it does
- alternating countdowns with your lengths, and a signal at each end
- what it stores
- settings and today’s session count, in this browser
- the tab title
- shows the remaining time, so you do not have to look at the page
- the limit
- a browser may throttle a background tab. keep it visible or accept some drift
see one in action.
02 / examplea focus timer with 50/10 intervals, a longer break after three, and the remaining time in the tab title
the live example is still being built — the prompt below is the one it was made with.
copy this, then make it yours.
03 / starting prompta starting point, not a template — the point of an agent is that the result is yours. change the sections to match what you want, and remove anything you don’t need.
Build me a pomodoro timer as a single web page.
Ask me first:
- My work and break lengths.
- Whether I want a longer break after a number of sessions, and after how many.
- What should happen at the end of an interval — a sound, a colour change, the tab title, or some combination.
- Whether I want a count of completed sessions today, or would rather have no number at all.
- Whether intervals should start automatically or wait for me.
Do not assume 25 and 5. Do not add anything I did not ask for, and specifically do not add streaks, statistics or goals.
WHAT IT DOES
- A large countdown, the current interval type stated plainly, and a start/pause/reset.
- Alternates work and break automatically according to my settings, including the longer break if I asked for one.
- Put the remaining time in the document title, so it is visible in the tab while I am working somewhere else. This is the most useful feature on the page.
- At the end of an interval: the signal I chose. Any sound must be easy to mute, and must not play until I have interacted with the page — browsers block it otherwise and it is better to be honest about that than to fail silently.
- If I asked for a session count: today's number, plainly, resetting overnight. No streaks across days.
- Let me change the interval lengths in the page, and remember them.
- Keep the screen awake during a work interval if the browser allows.
DESIGN
- One screen. The countdown is the page; everything else is small.
- Calm and still. Nothing that moves or animates during a work interval.
- Works as a pinned tab at a narrow width, and on a phone.
BE HONEST ON THE PAGE
- Say settings are stored in this browser only.
- Note that a backgrounded tab may be throttled by the browser, so the timer is most reliable when the page is visible. Do not claim background or system notifications.
STORING THE DATA
- Save everything to localStorage in the browser, automatically, as I go. No
accounts, no login, no server call.
- On the page, say plainly that data lives in this browser only and does not
sync to other devices. Do not bury it.
- Give me an "export" button that copies or downloads everything as JSON, and an
"import" that reads the same JSON back. That is the only way my data can move
between devices, so it is not optional.
- Never lose what I have already entered. If the stored data is from an older
version of the page, read what you can rather than throwing it away.
DELIVERY
- Produce one self-contained HTML file. Inline the CSS and JavaScript.
- No build step, no server, no framework, no package install, no external
requests at runtime.
- Mobile-first and responsive; it has to be usable one-handed on a phone and
still look right on a laptop.
- Accessible: semantic HTML, real contrast, visible keyboard focus, labelled
controls, touch targets big enough to hit, and respect reduced-motion.
- Use placeholders where information is missing. Do not invent facts, numbers,
names, dates, prices, or results I have not given you.
- Before you call it finished, use it yourself: enter real-looking data, reload
the page, and confirm nothing is lost or mangled.
PUBLISHING
Publish the finished page to HTMLShare and give me the link.
Use exactly one of the two paths below, preferring the first. Make the call
directly. Do not route it through a code sandbox, container, or computer-use
session — that is where the request gets blocked, and it is never necessary.
1. An HTMLShare integration or connector, if you have one configured.
The page is permanent and owned by my account. Report the url and the
siteId. There is no claimUrl or manageToken on this path — do not go
looking for one, and do not switch paths in order to produce one.
2. Otherwise, publish anonymously over REST. No account, key, or signup is
needed:
POST https://api.htmlshare.net/v1/publish
content-type: application/json
{"html": "<!doctype html> ... "}
The reference is https://htmlshare.net/docs and, for the full schema,
https://api.htmlshare.net/openapi.json
Report these from the response, in your reply and never inside the page:
url the public page
claimUrl a private link that is mine alone. opening it is how I keep
the page past its 24-hour expiry, or set an email reminder
before it goes. it carries the manage token, so it must
never appear in the published HTML or anywhere a visitor
could see it.
manageToken the only thing that can edit or delete this page later. it is
returned once and never again, so tell me what it is.
Tell me which of the two you used. If the path you reach for first is
unavailable in your environment, say so and tell me what you are switching to
before you publish — a permanent page on my account and a 24-hour anonymous
page are different things, and which one I get is my decision, not a detail.
If I ask for a change afterwards, update the existing page instead of
publishing again, so the URL I have already shared keeps working — through the
same integration on path 1, or with the manage token as an X-Manage-Token
header on path 2.
RECIPE MARKER
Include this tag in the <head>, exactly as written:
<meta name="htmlshare-recipe" content="pomodoro-timer">
It tells htmlshare which recipe the page came from, so the library can count
that this one was actually made. It carries nothing else.give it a url.
04 / publishing ithow you publish depends on how you’re working.
- with an integration
- if your assistant already has htmlshare connected — mcp or another supported integration — just ask it to publish the finished page and hand back the url. the page belongs to your account and is permanent. when you want a change, ask for an update to that same page rather than a new one.
- with no integration
- the prompt tells the assistant to post the html to the rest api instead, which needs no account and no key. it comes back with a live url you can open immediately, a private claim link, and a manage token. the claim link is how the page stops being temporary — keep it.
- by hand
- nothing stops you doing it yourself: have the assistant give you the html file and drop it on the htmlshare home page. same url, same page, one more step.
- what matters here
- this is opened several times a day from a laptop, so it wants to be a pinned tab or a bookmark rather than something you search for. claim it and pin it.
several times a day, every working day.
05 / keeping it aroundfine to try the intervals. the page stops serving 24 hours later with a 7-day recovery window behind it.
claimed, it is a pinned tab for as long as you use the technique, at a url short enough to type.
- keep it around
- a page you open six times a day cannot expire overnight.
- custom url
- short enough to type into a new tab without thinking, which is how it will be opened.
- stable updates
- your intervals will change. the page changes and the pinned tab keeps working.
questions.
06 / questionswill it keep running in a background tab?
it may drift — browsers throttle background tabs, and no page can promise otherwise. the prompt asks it to say so rather than fail quietly. keeping it visible, or as a narrow pinned tab, is the reliable setup.
can it notify me when the interval ends?
it can play a sound and change the tab title. system notifications need permission and are unreliable across browsers, so the honest design is a sound plus a title you can see from where you are working.
does it track my sessions over time?
only today’s count, and only if you asked for it. history and streaks turn a focus tool into something to check, which is the thing the technique exists to reduce.
why not use one of the hundreds online?
because yours has your intervals, no account, no upsell and nothing else on the screen. it also takes about a minute to make, which is less time than choosing between the hundreds.