the one calculation you keep doing.
almost everyone has one: a calculation done often enough to be annoying and specific enough that nothing online does it. pricing a job, working out dosage per weight, figuring board feet, converting a recipe to a tin size, quoting by the square metre.
it lives in a spreadsheet you rebuild, or in your head with a phone calculator and a note.
describe it once and it becomes a page with labelled inputs, an answer, and the formula written underneath so anyone can check it.
the most reusable recipe here.
01 / what it isthis is less a recipe than a pattern, and it is the one that generalises furthest: any repeated calculation with named inputs becomes a page. trades pricing work, hobbyists converting quantities, anyone applying a rate card they wrote themselves.
the important design choice is showing the working. a calculator that produces a number and no breakdown gets abandoned the first time the number looks wrong, whether or not it was.
- your inputs, labelled in your own words and units
- the answer, with the steps that got there
- the formula written out, so it can be checked
- validation for the inputs that have a sensible range
- a link you can send to whoever else does this calculation
- what goes in
- your formula, described in words, with your units and constraints
- what comes out
- labelled inputs, the result, a breakdown, and the formula in writing
- what it stores
- nothing by default; last inputs in this browser if you ask
- sharing
- the formula is in the page, so anyone with the url can use it
see one in action.
02 / examplea job-pricing calculator with five inputs, a breakdown of how the number was reached, and the formula shown
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 calculator as a single web page for a specific calculation I do often.
Ask me first:
- What the calculation is, in my own words, and what it is for.
- The inputs: what each one is, its units, and any sensible range.
- The formula or the rules. If it has conditions — different rates above a threshold, minimums, rounding — ask about each.
- What the output should be, and whether there are intermediate figures worth showing.
- Whether the page should remember my last inputs.
Get the formula right before building anything. Ask me about edge cases: what happens at zero, at very large values, when an optional input is blank. Do not guess at a rule I have not stated, and do not invent a standard formula for what you think I am calculating.
WHAT IT DOES
- Inputs labelled in my words, with my units shown, in the order I think about them.
- The result, prominent, formatted with its units.
- A breakdown of how the result was reached — the intermediate steps, not just the final number. This is what makes the calculator trustworthy.
- The formula itself written out somewhere on the page, in readable form, so anyone using it can check it against their own understanding.
- Validation: refuse or flag impossible inputs rather than producing a confident nonsense answer.
- Recalculate as I type.
- If I asked: remember my last inputs in this browser, and say so on the page.
DESIGN
- One screen. Inputs, result, breakdown.
- Numeric keypad on mobile for numeric fields.
- Plain and fast. This is a tool, not a presentation.
BE HONEST ON THE PAGE
- Show the formula, and note that it is the one I supplied.
- If the calculation has limits or assumptions I mentioned, state them beside the result rather than in a footer.
- If anything is remembered, say it is stored in this browser only.
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="custom-calculator">
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
- if colleagues do the same calculation, the url is the whole point — one address, one agreed formula, nobody using last year’s spreadsheet. claim it and send it round.
a tool you use weekly needs an address.
05 / keeping it aroundfine to check the formula came out right. it stops serving after 24 hours, with a 7-day recovery window behind it.
claim it. this is a page you open for years and possibly send to colleagues, and neither works from a temporary url.
- keep it around
- a tool you use weekly cannot expire nightly.
- custom url
- if colleagues use it too, a memorable address is what stops three versions circulating.
- stable updates
- rates and rules change. update the page and everyone using the link gets the new version.
questions.
06 / questionshow do i know the formula is right?
check it — the page prints it, and the breakdown shows each step. give the agent a worked example you already know the answer to while it is building, which catches a misunderstanding before it costs you anything.
can i share it with colleagues?
yes, and that is often the best reason to build it. the formula is in the page, so everyone with the url is using the same one rather than their own copy of a spreadsheet.
can it handle conditional rules?
yes — thresholds, minimums, different rates above a level, unusual rounding. describe them in words; the prompt tells the agent to ask about each rather than assume.
what if i get the rules wrong?
update the page and republish to the same url. everyone you sent it to picks up the correction without being told, which is one of the clearer advantages over a circulated file.