⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
answer-me-with-html
>-
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
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
Why not just ask for HTML?
You can. Models write decent HTML now. But most of what they write is not content. We counted the tokens in 9 pages the model wrote by hand, 4,893 tokens on average:
| Part of the page | Share | With this skill |
|---|---|---|
| SVG diagrams: coordinates and paths | 47% | The CLI writes it |
| CSS | 15% | The CLI writes it |
| HTML tags | 17% | The CLI writes it |
| Text | 21% | The model writes it, as Markdown |
With this skill the model writes only a Markdown draft. For the same questions that was 612 tokens on average, about 1/8 of the hand-written HTML. Less to write means less to wait for (3 topics × 3 runs, medians, Claude Sonnet 5.5, a plain Claude Code setup):
| Ask for HTML directly | Answer me with HTML | ||
|---|---|---|---|
| Tokens the model writes | 4,893 | 612 | 8× fewer |
| Time | 31 s | 12 s | 2.6× faster |
The token counts are saved in bench/corpus/tokens.json, so node bench/corpus.mjs gives the same numbers every time. The pages themselves are a download. The bill drops less than the writing, about 15% here, because every turn also reads the system prompt, your question and the conversation, with or without the skill. See where the cost goes.
Explainer videos save even more: about 18× fewer output tokens and 12× faster in a small test.
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.
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. 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.
How is this different from Archify or GenUI plugins?
Archify makes one interactive diagram from a JSON spec. GenUI plugins such as dsh-genui show components inside one chat app. This skill answers the whole question as one page: text, tables, code and diagrams, from a Markdown draft, in any agent that can run a shell command. See the full comparison.
Explainer videos
Karpathy's ladder for understanding LLM output ends with explainer videos. Ask for one in 3Blue1Brown style: "make a 3b1b-style video on the TCP handshake".
// HOW IT'S BUILT
KEY FILES