effective-html
HTML is the chosen format for what was asked (see argument-hint). Your job is a good artifact, not a debate about the format.
Constraints (load-bearing — the artifact must work offline, on a plane, when forwarded)
- One
.htmlfile. All CSS in a<style>tag. No external stylesheets, no<script src>, no CDN, no webfonts — use system stacks (ui-serif…,system-ui…,ui-monospace…). - No JavaScript for interactivity or animation — HTML + CSS only (
<details>,:target,:checked, transitions). - No
fetch, nolocalStorage, no cookies, no service workers.
Agent ↔ user comm contract
Ask the user if the HTML doc is for presentation or iteration. If it's for iteration, follow these instructions:
Iteration Instructions
Iteration artifacts include, at the top of the page, two buttons: Export Comments Only and Export to Markdown. Each logical section gets a <textarea> comment box; one more at the end for whole-doc comments. Both exports start with the absolute path of this HTML file as a top-line reference (e.g. > Source: /path/to/artifact.html) — the agent receiving the paste may not know which file the comments are about. Export Comments Only then copies each non-empty comment with its section heading. Export to Markdown copies a markdown rendering of the whole doc (comments inlined under their section). These are the only places JS is allowed — keep them tiny.
Use visualizations where they earn their place
The whole reason the user picked HTML over markdown is to put information in space. When a section would otherwise be a wall of prose or a long list, ask whether an inline <svg> (a flow, a ring, a 2×2, a sparkline, a timeline tick-strip, a density bar, a margin-pin gutter, a system schematic) would let the reader pre-load the shape before reading. Hand-write the SVG; no chart libraries. There's no minimum count — use them where they teach, skip them where they'd be decoration. But "wall of styled paragraphs" almost always means you missed a chance.