answer-me-with-html

<p align="center"> <img src="docs/logo.svg" width="64" height="64" alt="Answer me with HTML logo"> </p> <h1 align="center">Answer me with HTML</h1> <p align="center"> <b>Super Fast&nbsp;&nbsp;|&nbsp;&nbsp;ASD-STE100&nbsp;&nbsp;|&nbsp;&nbsp;Explainer Videos&nbsp;&nbsp;|&nbsp;&nbsp;One File, Offline</b> </p> <p align="center"> <b>An agent skill. Ask a hard question, get a page you can actually read instead of a wall of text.<br>The model writes about 1/7 of the tokens it would need to hand-write the HTML.</b> </p> <p align="center"> <a href="https://github.com/QingYunA/answer-me-with-html/releases"><img src="https://img.shields.io/github/v/release/QingYunA/answer-me-with-html?style=flat-square&logo=github&labelColor=16181d&color=2ea44f" alt="Release"></a> <a href="https://github.com/QingYunA/answer-me-with-html/stargazers"><img src="https://img.shields.io/github/stars/QingYunA/answer-me-with-html?style=flat-square&logo=github&labelColor=16181d&color=2ea44f" alt="Stars"></a> <img src="https://img.shields.io/badge/works%20with-Claude%20Code%20%C2%B7%20Codex%20%C2%B7%20Cursor%20%C2%B7%20OpenCode%20%C2%B7%20Pi-2ea44f?style=flat-square&labelColor=16181d" alt="Works with Claude Code, Codex, Cursor, OpenCode, Pi"> <a href="https://www.theagenticleaderboard.com/alternatives/answer-me-with-html/"><img src="https://www.theagenticleaderboard.com/badges/new/answer-me-with-html.svg" alt="The New 100"></a> </p> <p align="center"> <b>English</b> · <a href="README.zh-CN.md">简体中文</a> </p> <p align="center"> <img src="docs/images/text-vs-page.png" alt="The same TCP question answered in plain text and with the skill: a wall of terminal text on the left, one readable page with diagrams on the right" width="100%"> </p>

Once installed, ask questions the way you always do:

> Explain the TCP three-way handshake
> Map out how the modules in this repo fit together
> Redis or Memcached for our cache?

The agent writes a short Markdown draft and hands it to the CLI that ships with the skill. About 50 ms later you have a page:

https://github.com/user-attachments/assets/d3063a28-5dfd-4c44-a562-be901c49b249

<p align="center">_{24-second demo. Turn the sound on for the music.}</p>

Why not just ask for HTML?

You can. Models write decent HTML now. The cost is output tokens: the model has to type every line of CSS, every wrapper div and every SVG coordinate, and output tokens are what you sit and wait for.

With this skill, the model writes only the content. We asked the same questions with the same model both ways, in a plain Claude Code setup (3 topics × 3 runs, medians, Claude Sonnet 5.5):

| | Ask for HTML directly | Answer me with HTML | | | :--- | ---: | ---: | :--- | | Output tokens | 5,341 | 870 | 6.1× fewer | | Time | 33 s | 12 s | 2.8× faster | | Cost per answer | $0.092 | $0.067 | 27% cheaper |

<p align="center"> <img src="docs/images/plain-vs-skill.png" alt="The same TCP question answered both ways" width="100%"> </p> <p align="center">_{One run from an earlier benchmark in a heavily loaded setup: same prompt, same model, and both pages are usable. This run took 9,351 output tokens for the plain page and 899 with the skill.}</p>

The speed-up holds in every setup. The cost depends on how much context your setup loads: the skill adds two short turns, and every turn re-reads the context. In a heavy setup (about 51,000 tokens of tools, rules and skills) the two extra turns cost more than the saved tokens, and we measured the skill about 20% more expensive.

Explainer videos show a bigger gap. We asked for the TCP handshake as a 3Blue1Brown-style video, no voice, both ways:

| | Write the video page by hand | am video | | | :--- | ---: | ---: | :--- | | Output tokens | 27,839 | 1,566 | 17.8× fewer | | Time | 202 s | 17 s | 11.8× faster |

That is one topic and five runs (3 by hand, 2 with am video, medians), so read it as a rough size, not a precise ratio. Per-topic numbers and the script to reproduce them are in bench/.

Install

You need Node.js 20 or newer. There is no npm install step. The CLI is bundled inside the skill.

Let your agent install it (recommended)

Paste this into Claude Code, Codex, Cursor, OpenCode or any other agent:

Install Answer me with HTML: read https://raw.githubusercontent.com/QingYunA/answer-me-with-html/main/INSTALL.md and follow it.

INSTALL.md is written for agents. It installs the plugin in Claude Code and the skill in other agents, keeps an existing install, asks you nothing, and ends with one report after checking the result with the TCP three-way handshake page. If your agent cannot open links, use npx -y skills add QingYunA/answer-me-with-html -g -y -a <your agent name> (for Claude Code, -a claude-code).

Claude Code plugin

Run this inside Claude Code:

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

One command

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

It asks which agents to install into. The installer, vercel-labs/skills, supports more than 70 agents.

<details> <summary>Manual install</summary>

Copy the skills/answer-me-with-html folder into your agent's skill folder. For Claude Code:

git clone --depth 1 https://github.com/QingYunA/answer-me-with-html.git /tmp/answer-me-with-html
cp -R /tmp/answer-me-with-html/skills/answer-me-with-html ~/.claude/skills/answer-me-with-html

Skill folders for other agents: Codex ~/.codex/skills/, Cursor ~/.cursor/skills/, OpenCode ~/.config/opencode/skill/.

</details>

No setup is needed after install. We recommend turning on always-on mode: the agent then adds a page to every conclusion, not only the hard ones. It takes one rule in your rules file.

What you ask, what you get

| You ask | You get | | :--- | :--- | | "Explain the TCP three-way handshake" | A sequence diagram, a state diagram and a flag table | | "How are the modules in this repo organized?" | A folder tree plus a call graph | | "Redis or Memcached?" | A comparison table with ✓ and ✗, then a verdict | | "What's wrong with this paragraph?" | Each sentence annotated, with the problem words and fixes | | "How did Kubernetes come about?" | A timeline with the key moments highlighted | | "Plan the cache change" | The real code from your files, and the open decisions as options you answer on the page | | "How do I show hidden files with ls?" | No page. A one-line question gets a one-line answer |

The agent decides when a page is worth it: related concepts, multi-step flows, multi-way comparisons. You can also just say "explain it in HTML".

Pages are saved in ~/.answer-me-with-html/pages/. The buttons in the top-right corner switch the theme and light/dark mode, collect your reply, and copy the Markdown that produced the page.

Explainer videos (3Blue1Brown style)

Karpathy's ladder for understanding LLM output ends with explainer videos. Ask for one: "make a 3b1b-style video on the TCP handshake".

<p align="center"><img src="docs/images/video-en.png" alt="Four frames from a generated explainer video in the blueprint style: title card, a sequence diagram with the Server highlighted, a flow diagram, and a comparison table" width="820"></p>

The agent writes the same kind of draft as for a page, plus one line of narration per beat. Nothing else:

## Both sides wait
```sequence
Client -> Server: SYN
Server -> Client: SYN-ACK
```
> The client sends a SYN to ask for a connection.
> The [Server] answers with a SYN-ACK.

am video turns it into a player page:

• Built step by step. When the Nth line of narration plays, the Nth step of the diagram appears. Arrows draw themselves. If there are more lines than steps, the extra lines at the start act as an intro.
• Camera focus. [Server] in the narration pushes the camera toward that node and highlights it. The diagram never leaves the frame.
• Objects carry over. A node with the same name in the next scene glides to its new place instead of cutting.
• Narration. It uses ElevenLabs if ELEVENLABS_API_KEY is set (optional; setup guide), the system voice otherwise, and captions only if neither exists. Each beat lasts as long as its audio, so picture and voice stay in sync.
• One file. The page has the audio inside and plays offline. Add --mp4 for a 1080p video file. This needs Chrome, ffmpeg and Node.js 22+ on your machine.

The draft for the example video (examples/video-tcp.en.md) is 1.3 KB, a few hundred output tokens. The agent only makes videos when you ask. A local voice server, themes and export time are in video details. Full syntax: am help video.

Settings

Change settings with a slash command. There are no config files to edit by hand.

| Where | How | | :--- | :--- | | Claude Code (plugin install) | /answer-me-with-html:config asks what to change. /answer-me-with-html:config open off changes it directly | | Any agent | /answer-me-with-html config open off, or just say "stop opening the browser" | | Terminal | am config to view, am config set open off to change, am config reset to restore defaults |

| Key | Default | What it does | | :--- | :--- | :--- | | open | on | Open each page in the browser after it is made. Turn it off if pop-ups interrupt you | | theme | auto | Default theme: auto (paper for long text, blueprint for diagrams), blueprint, shadcn, paper, or your own theme | | mode | auto | Default color mode: auto, light or dark | | style | 80 | Writing check: off, 80 (warn only) or strict (refuse to render) | | update_check | on | Check GitHub for a new version once a week and mention it. Never updates by itself | | voice | auto | Video narration: auto (ElevenLabs if ELEVENLABS_API_KEY is set, else system voice), elevenlabs, local, system or off |

Settings live in ~/.answer-me-with-html/config.json. A theme written in a draft beats the default. --open and --no-open affect one run only.

Always-on mode (recommended)

With always-on mode, every conclusion comes with a page: whenever the agent gives a conclusion, summary, plan or comparison, even a short one, it adds a small page with 2 to 4 panels and puts the path at the end of the reply. These pages never pop open, so they don't interrupt you. Casual chat and replies with no conclusion stay as they are. Claude Code makes no pages in plan mode.

We recommend turning it on: you stop having to ask for a page, and a short conclusion gets the same readable format as a long one. The cost is a short draft per reply, and the pages pile up in ~/.answer-me-with-html/ (clear them with am clean).

It is off by default: the agent makes a page only for questions that need one. To turn it on, add one rule to your agent's rules file.

Paste this to your agent so it writes the rule into its own rules file, such as ~/.claude/CLAUDE.md or AGENTS.md:

Turn on always-on mode for Answer me with HTML: add a global rule — "[answer-me-with-html always-on] Whenever a reply gives a conclusion, summary, plan, comparison, review or explanation, even a short one, also make a page with the answer-me-with-html skill (2 to 4 panels for routine answers), render it with --no-open before you write the reply, and end the reply with a file:// link to the page. Skip casual chat, one- or two-sentence replies with no conclusion, pure command output, and requests for plain text."

To turn it off, delete that rule from the file.

Installed the old answer-me-with-html-always plugin? It is gone from this repository, but your copy keeps adding the reminder until you remove it. Run `/plugin uninstall answer-me-with-h