An agent skill for Claude Code, Codex, Cursor, OpenCode and Pi

Ask a hard question. Get a page, not a wall of text.

The agent writes a short Markdown draft. The CLI that ships with the skill turns it into one HTML page with diagrams, tables and layout. The model types about 1/7 of the tokens it would need to write that HTML by hand.

Try the playground Install

Project: Answer me with HTML
Rev: 0.4.14
License: MIT
Output: ≈ 1/7 tokens
File: 1 × .html, offline
Works with: Claude Code · Codex · Cursor · OpenCode · Pi

01 draft.md 02 am render 03 page.html

The draft is examples/tcp.en.md. The page is made by the real renderer, running in your browser. Edit this draft →

A wall of text, or one page

Same question, same model. Without the skill you read the answer line by line and build the picture in your head. With it, the diagram, the flow, the table and the warning are in view at once.

FIG. 1“Explain the TCP three-way handshake”, answered both ways.

Ask the way you always do

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 model writes content. The CLI draws.

Ask a model for HTML and it types every CSS rule, every wrapper div and every SVG coordinate. Output tokens are what you wait for. Here the model writes only the content, and the CLI does the rest.

FIG. 2The render path. About 50 ms from draft to page.

Input

What the model writes

draft.mdcore of tcp.en.md

---
title: TCP three-way handshake
---
## A Three-way handshake {span=2}
```sequence num
Client -> Server: SYN, seq=x
Server -> Client: SYN+ACK, seq=y, ack=x+1
Client -> Server: ACK, ack=y+1
note Client, Server: ESTABLISHED
```

## C State changes {span=2}
```flow LR
(CLOSED) -> LISTEN: passive open
LISTEN -> SYN_RCVD: get SYN / send SYN+ACK
SYN_RCVD -> *ESTABLISHED: get ACK
```

Output

What the CLI writes for it

Draft 1.3 KB

Page 80.6 KB

CSS 33.3 KB
Page script 34.4 KB
SVG 6.2 KB
HTML 6.7 KB

63×: more text in the page than in the draft, none of it typed by the model
278: SVG coordinates, computed by layout code instead of guessed
282: CSS rules for the theme, in light and dark
0: network requests when you open the page. No CDN, no web fonts

Measured on the full examples/tcp.en.md (44 lines).

Playground

This is the real renderer, bundled for the browser. Edit a draft and the page updates as you type. Nothing leaves your machine.

Theme Mode

tcp.md

Tab inserts two spaces. Press Esc, then Tab, to leave the editor.

page.htmlLoading the renderer…

✗

Correct example

The CLI gives the agent this same message. It names the line, the component and a correct example, so the agent fixes the draft in one try.

Render: —
Size: —
Panels: —
Components: —
STE: —

Code blocks with src= quote real files, so they only work in the CLI. Local images work only in the CLI too.

Components

The agent picks a component by the shape of the information. Each card is rendered live from a few lines of draft. Click one to open it in the playground.

Full syntax for any component is one command away.
am help <component>

Three themes, light and dark

The same draft in each theme, rendered live. By default the CLI picks paper for long text and blueprint for diagrams. You can add your own theme.

Every page also has a theme and mode switch in its top-right corner.

blueprint · light

Explainer videos

Karpathy’s ladder for understanding LLM output ends with explainer videos. Ask for one, for example “make a 3b1b-style video on the TCP handshake”. The player below is a real am video page.

1
Built step by step
When the Nth line of narration plays, the Nth step of the diagram appears. Arrows draw themselves.
2
Camera focus
[Server] in the narration pushes the camera toward that node and highlights it.
3
Objects carry over
A node with the same name in the next scene glides to its new place instead of cutting.
4
Narration
ElevenLabs if you set a key, the system voice otherwise, captions if neither exists. Add --mp4 for a 1080p file.

1.3KB

The whole draft for the example video. A few hundred output tokens.

The agent only makes videos when you ask. Full syntax: am help video.

video-tcp.en.mdone scene

## 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.

Benchmark

We asked the same questions with the same model both ways: “write the page as HTML” and “use the skill”. The speed-up holds everywhere. The cost depends on your setup.

Pages · plain Claude Code setup

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

Explainer videos · by hand vs am video

Output tokens

27,839

1,566

17.8×fewer

Time

202 s

17 s

11.8×faster

Setup: Plain Claude Code: project settings only, no MCP servers
Model: Claude Sonnet 5.5
Pages: 3 topics × 3 runs, medians
Videos: 1 topic, 5 runs (3 by hand, 2 with am video), medians. A rough size, not a precise ratio

The STE writing check

ASD-STE100 is a controlled form of English, first used for aircraft maintenance manuals. Its rules are concrete: short sentences, one meaning per word, steps as commands. The CLI checks every draft against the parts a machine can check. Try it on your own text.

Your text

Lengthsteps ≤ 20 words, descriptions ≤ 25, paragraphs ≤ 6 sentences
Words“use”, not “utilize”; “before”, not “prior to”
Stylepassive voice; in Chinese, empty verbs and stock phrases

Checked

Install

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

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 keeps an existing install, asks you nothing, and ends with one report after it checks the result with the TCP page.

Run these two commands inside Claude Code:

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

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

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

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

Other agents: Codex ~/.codex/skills/, Cursor ~/.cursor/skills/, OpenCode ~/.config/opencode/skill/.

Recommended

Always-on mode

By default the agent makes a page only for questions that need one. With always-on mode, every conclusion, summary, plan or comparison comes with a small page of 2 to 4 panels. These pages never pop open. Paste this to your agent so it writes the rule into its own rules file:

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 the rule from the file.

Needs: Node.js 20+
npm install: not needed
Network: a weekly version check, can be turned off
Setup: none