the grid you would rather not break.
a habit tracker is a grid. rows are the things you are trying to do, columns are days, and you fill in a square. everything beyond that is somebody else’s product decision.
the products add accounts, streak anxiety, a premium tier for a fifth habit, and a notification you eventually turn off — at which point the tracker stops working, because the tracker was the notification.
the version worth having is the grid on your home screen. tell an agent your habits and how you want the week to look, and it is at a url in a minute.
a grid, and the discipline to keep it small.
01 / what it isthe research-backed part of habit tracking is the visible record — you see the row, you do not want the gap. everything bolted onto that in commercial trackers is engagement mechanics, and engagement mechanics are how a tracker becomes a thing you feel bad about rather than a thing you use.
building your own is mostly an exercise in leaving things out. five habits, one tap each, the week in front of you. the page has no opinion about whether you did well, which turns out to be the feature.
- your habits as rows, days as columns, one tap to fill a square
- the current week large, the month behind it
- habits that are not daily — three times a week, weekdays only, whatever yours are
- a count if you want one, and no streak shaming if you do not
- notes on a day, for when the interesting thing is why you missed it
- export and import as json
- what it records
- which habits you did on which days, plus optional notes
- where that goes
- localStorage in one browser. not synced, never uploaded
- schedules
- daily, weekdays, n-times-a-week — whatever you described, not a fixed set
- moving it
- json export and import; there is no sync and there will not be
see one in action.
02 / exampleno streak counter, no badges. the grid is the feedback, which is the whole argument for this shape. stored in the browser only, and export is how a copy leaves the device.
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 habit tracker as a single web page.
Ask me first:
- Which habits I am tracking. Push back gently if I list more than about six — a grid I cannot read is a grid I will not use.
- For each one, how often it is meant to happen: daily, weekdays, a number of times a week, or something else.
- Whether the week starts on Monday or Sunday for me.
- Whether I want any counters or streaks at all, or just the grid.
Do not invent habits or schedules. Do not add habits you think I should have.
WHAT IT DOES
- The current week is the top of the page and the biggest thing on it: habits as rows, days as columns, one tap to fill a square. Tapping again clears it.
- Below it, the same grid for the month, smaller, so the record is visible at a glance.
- Respect each habit's own schedule. A weekdays-only habit shows no expectation on Saturday, and a three-times-a-week habit shows progress against three, not against seven.
- Today's column is visually distinct without being loud.
- Let me add a short note to any day.
- Let me add, rename, reorder and archive habits from the page itself. Archiving keeps the history; deleting is separate and asks first.
- If I asked for counters, keep them factual: how many times this week, this month. If I said no, do not add streaks, badges or encouragement anyway.
DESIGN
- Mobile-first, one-handed, tappable without precision.
- The grid must be legible at a glance — this is a page people look at more often than they interact with.
- No celebration animations. No red for a missed day; a gap is information, not a failure state.
BE HONEST ON THE PAGE
- Say the record is stored in this browser only and does not sync between devices.
- Do not claim reminders or notifications; a published page cannot send them.
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="habit-tracker">
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
- a habit tracker is opened every single day or it is opened never. that makes the url the whole game — claim it, pick a slug you can type, and put it on your home screen the same hour you make it.
a tracker that expires is a tracker you have to restart.
05 / keeping it aroundfine for one day of seeing whether the grid feels right. the page stops serving after 24 hours, with a 7-day recovery window behind that.
claimed, it is permanent and at a url you chose. for a page whose entire value is continuity, that is not a nice-to-have.
- keep it around
- the history is the point, and an anonymous page throws the page away after 24 hours.
- custom url
- a habit page lives on your home screen and occasionally needs re-finding by typing. make that easy.
- stable updates
- habits change every few months. the page can change at the same address, and the icon keeps working.
questions.
06 / questionscan it remind me?
no. an html page cannot send notifications, and a tracker that claimed it could would be lying to you daily. put it on your home screen where you will see it, or set a repeating alarm on your phone.
what if i tick on my phone and my laptop?
you will have two separate grids, because each browser stores its own. pick the device you will actually use and stay on it — or export from one and import into the other now and then.
can two of us share a tracker?
not really. you can both open the page, but you will each see your own ticks and never each other’s. shared state would need hosted storage, which we do not offer and no page here pretends to have.
what happens when i want to change my habits?
add and archive them in the page itself — the prompt asks for that, so a change does not need a rebuild. a structural change is a sentence to your assistant and a republish to the same url; export first if the history matters.