Turn Dense Agent Answers Into Readable HTML Pages

Ask an agent to explain the TCP three-way handshake and you get a wall of text. Answer me with HTML answers with a page: sequence diagrams, state diagrams, comparison tables — one .html file that opens offline. The trick is that the model never writes the HTML.

Why This Skill Matters

The agent writes a short Markdown draft, and the CLI bundled with the skill turns it into a finished page — templates, panel placement, themes, and diagram coordinates are computed by code, not guessed by the model. The README's measurements: across 9 sample pages, hand-written HTML averaged 4,893 output tokens against 612 for the draft, about 1/8; median time to an answer dropped from 31 s to 12 s (3 topics × 3 runs, Claude Sonnet 5.5). Pages land in ~/.answer-me-with-html/pages/ as single files with no CDN links or web fonts, so they open offline and are easy to share.

Installation

You need Node.js 20 or newer — no npm install step, the CLI ships inside the skill. In Claude Code:

/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html

For any other agent:

npx skills add QingYunA/answer-me-with-html

The installer asks which agents to install into; per the README it uses vercel-labs/skills, which supports more than 70 agents. No setup is needed after install.

Real Workflow: Explain the TCP Three-Way Handshake

1. Ask the way you always do: "Explain the TCP three-way handshake".
2. The agent drafts Markdown using the skill's components — flow, er, sequence, tree, timeline, limits, annot, kv, callout, ask, code blocks, and tables — and hands it to the CLI.
3. About 50 ms later the page exists: the CLI picks the template, lays out the diagrams, and applies one of three themes (blueprint, shadcn, paper), each with light and dark modes.

When a draft has an error, the CLI returns the line number, the component, and a correct example, so the agent fixes it in one try — per the README. The page carries interactive extras: annotate any panel, answer the agent's open decisions with the ask component, then press Reply to paste everything back into the chat.

A second mode is worth a run: explainer videos. Ask for a "3b1b-style video on the TCP handshake" — the agent adds one narration line per beat, and am video renders a player page that builds the diagram step by step. Export happens in the browser; --mp4 needs ffmpeg, --webm does not.

Tips

• Turn on always-on mode (off by default, and the README recommends it): every conclusion, summary, or comparison gets a small 2–4 panel page attached, and short answers read as well as long ones. It is one rule pasted into your rules file.
• Drafts are checked against rules adapted from ASD-STE100 — sentence length, wordy phrases, passive voice. It warns by default; strict mode refuses failing drafts.
• Code blocks can quote real lines from your files with src= and lines=, so the page shows your actual code; files outside the folder and files holding keys are refused.
• Every page embeds the Markdown that produced it — "Copy source" hands the draft back.
• One-line questions get one-line answers: the agent decides when a page is worth it, and you can force it with "explain it in HTML".

When Not to Use This

Quick factual lookups don't need a page, and the README's own example says so: "How do I show hidden files with ls?" gets no page, just the answer. If you specifically want a single interactive diagram, the README contrasts this with Archify, which builds one from a JSON spec; GenUI-style plugins keep components inside one chat app. And the numbers above are the README's benchmarks on Claude Sonnet 5.5 — your model and prompt mix will shift them.

See the leaderboard for more skills.