by QingYunA
Answer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。
# Add to your Claude Code skills
git clone https://github.com/QingYunA/answer-me-with-htmlGuides for using ai agents skills like answer-me-with-html.
See how answer-me-with-html compares with popular alternatives.
answer-me-with-html is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by QingYunA. Answer me with HTML — an agent skill that answers hard questions with a one-page HTML you can actually read. 让 AI Agent 用一页 HTML 回答复杂问题。. It has 138 GitHub stars.
answer-me-with-html's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/QingYunA/answer-me-with-html" and add it to your Claude Code skills directory (see the Installation section above).
answer-me-with-html is primarily written in JavaScript. It is open-source under QingYunA on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh answer-me-with-html against similar tools.
No comments yet. Be the first to share your thoughts!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
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/1f13b1fe-70a9-4c39-8530-b12e553e17ea
You can. Models write decent HTML now. The problem is the bill you pay in output tokens: the model has to type every line of CSS, every wrapper div and every SVG coordinate. Output tokens are also 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 (3 topics × 3 runs, medians, Claude Sonnet 5.5):
| Ask for HTML directly | Answer me with HTML | ||
|---|---|---|---|
| Output tokens | 6,873 | 923 | 7.4× fewer |
| Time | 46 s | 13 s | 3.6× faster |
| Cost per answer | $0.22 | $0.26 | about the same |
Why the cost doesn't drop too: the skill adds two short turns (load the skill, run the CLI), and every turn re-reads the conversation context. You save the waiting, not the bill. Per-topic numbers and the script to reproduce them are in bench/.
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 the Answer me with HTML skill: run
npx -y skills add QingYunA/answer-me-with-html -g -y, and pass-awith your own agent name (for Claude Code,-a claude-code). Then read its SKILL.md and use it to make a page that explains the TCP three-way handshake, so we know it works.
Run this inside Claude Code:
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html@answer-me-with-html
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.
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/.
No setup is needed after install.
| 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 |
"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, and copy the Markdown that produced the page.
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 |
always |
on |
Always-on mode (see below). Only matters when the always-on plugin is installed |
theme |
blueprint |
Default theme: blueprint or shadcn |
mode |
auto |
Default color mode: auto, light or dark |
style |
80 |
Writing check: off, 80 (warn only) or strict (refuse to render) |
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.
By default, the agent makes a page only for questions that need one. If you want a page with every conclusion, turn on always-on mode.
The agent then gets a short reminder each turn (about 90 tokens). Whenever it 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.
Claude Code: install one more plugin.
/plugin marketplace add QingYunA/answer-me-with-html
/plugin install answer-me-with-html-always@answer-me-with-html
Pause it with /answer-me-with-html:config always off. You don't need to uninstall.
Other agents: paste this to your agent so it writes the rule into its own rules file, such as 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, and end the reply with the page path. Skip casual chat, one- or two-sentence replies with no conclusion, pure command output, and requests for plain text."
Andrej Karpathy posted that as LLMs do more of the work, keeping up with their output becomes the hard part. A diagram or a web page is far easier to take in than a long block of text.
I tried asking agents to answer in HTML directly. The pages were good. They were also slow.
A decent page took a minute or two. Most of that time went into hundreds of lines of CSS that were nearly the same every time. Diagrams were worse: the model had to compute SVG coordinates by hand, and arrows often pointed at nothing.
So Answer me with HTML takes that work away from the model. The model writes content. The CLI handles layout, color and drawing.
This is all the model writes:
---
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
```
The CLI does the rest. It picks the template, places the panels, applies the theme, lays out the flow chart with dagre and spaces the sequence diagram by label width. The full draft, examples/tcp.en.md, becomes this page:
blueprint looks like an engineering drawing. shadcn uses clean cards. Both have light and dark modes..html with no CDN links or web fonts. It opens offline and is easy to share.