Answer me with HTML turns agent replies into visual explainers

Developer QingYunA has released Answer me with HTML, an MIT-licensed agent skill for generating single-page HTML explainers. It supports Claude Code, Codex, Cursor and OpenCode. The model writes a compact semantic draft, then a bundled CLI handles layout, themes and diagram geometry.

The project targets structured questions whose answers benefit from sequence diagrams, comparison tables, timelines or state flows. It builds on an observation cited from Andrej Karpathy: as language models produce more work, reviewing that output becomes a bottleneck. Visual structure can make complex answers faster to scan.

A renderer between model and browser

The skill separates content generation from presentation through a four-step pipeline:

1. The agent decides whether the request warrants a visual page.
2. It writes Markdown with YAML front matter and fenced component blocks such as sequence or flow.
3. The CLI parses the draft, selects a template and computes the layout.
4. The renderer writes one self-contained HTML file to ~/.answer-me-with-html/pages/.

Dagre calculates flow-chart placement, and the sequence renderer spaces participants according to label width. The language model therefore avoids spending tokens on CSS, grid coordinates and individual SVG points.

The draft format

---
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
```

The skill’s instructions reserve pages for related concepts, multi-step processes and comparisons. Small factual requests can still receive a short text response. Each generated page embeds its assets, uses system fonts and opens offline without CDN requests.