Answer me with HTML — ask a hard question, get a page

What

Answer me with HTML is an agent skill for Claude Code, Codex, Cursor, OpenCode, Pi, and DeepSeek Harness that turns an answer into a single offline HTML page with diagrams, tables, and structured layout instead of a long block of text. The agent writes a short Markdown draft, and a bundled CLI (am) renders it into the final page, so the model types roughly one-eighth of the tokens it would need to write that HTML by hand. It is positioned for developers and technical users who already work inside coding agents and need to absorb model output quickly rather than read it line by line.

Features

• Draft-then-render pipeline: the agent produces a compact Markdown file and the CLI handles CSS, layout, and SVG coordinates, which the project reports as about 63× more page text than draft text with none of it typed by the model.
• Shape-driven component set: components such as flow, sequence, er, class, api, tree, timeline, limits, annot, kv, callout, ask, code block, and table let the agent pick a format based on the kind of information rather than defaulting to prose.
• Self-contained output: each result is one .html file that opens offline with no network requests, no CDN, and no web fonts, available in three themes (blueprint, shadcn, paper) with light and dark modes and an in-page theme switch.
• STE writing check: drafts are validated against machine-checkable ASD-STE100 rules (sentence length, word choice, passive voice in steps), and the CLI returns a message naming the line, component, and a correct example so the agent can fix it in one attempt.
• Optional explainer videos: on request, the skill builds step-by-step animated pages with camera focus on named nodes, narration via ElevenLabs if a key is set or a system voice otherwise, and an optional --mp4 export.

Helpful Tips

• Installation requires Node.js 20 or newer but has no npm install step, since the CLI ships inside the skill; the documented paths are an agent-read INSTALL.md, a Claude Code plugin marketplace, a DeepSeek Harness plugin command, npx skills, or a manual folder copy into the agent's skills directory.
• Decide deliberately between default mode (pages only when a question needs one) and always-on mode (a 2–4 panel page attached to every conclusion, summary, plan, or comparison), since always-on adds output to routine replies.
• Treat the published benchmark as setup-specific: it was measured on a plain Claude Code configuration with no MCP servers, and the project notes that cost savings lag token savings because context is re-read each turn and the skill adds short turns of its own.
• Author drafts rather than HTML: use the component syntax and am help <component> for exact grammar, and note that src= code blocks and local images resolve only in the CLI, not in the browser playground.