← Back to list
🛠️

answer-me-with-html Checked

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft an…
🛠️ Developer Tools skills By QingYunA Version v1.0.0 Added 2026-10-12 Updated 2026-10-12 Source ↗
9.6Overall rating
0Views
1Downloads
2.9kStars

Installation

🤖 Install via AI

Copy the prompt below and send it to your AI assistant (e.g. Claude Code) — it will follow the instructions and install automatically.

Install the "answer-me-with-html" skill by following the instructions at https://skill123.me/install/answer-me-with-html.
⌨️ Command line install

Run in your terminal — downloads and installs to ~/.claude/skills/.

curl -fsSL https://skill123.me/install/answer-me-with-html.sh | bash
📦 Download ZIP

Download the zip and extract it into your skills directory (e.g. ~/.claude/skills/), then restart your session.

⬇ Download v1.0.0 · 249 KB
📊 Static rating
9.6/10
Trigger
10.0
Structure
10.0
Workflow
9.6
Content
9.0
Engineering
9.0
Security
9.5

Six-dimension rubric with reviewer rationale.

View scorecard ↓
🛡 Dynamic test
—

Not live-tested yet — this skill is rated on static analysis only.

About this skill

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.

Answer me with HTML: answer a complex question with one HTML page

You write only the **content draft** (extended Markdown). The am CLI does all layout, colours, dark mode and diagram coordinates. **Do not hand-write HTML / CSS / SVG.**

Reply to the user, and write the draft, in the user's language.

Documentation

Turns an answer into a one-page visual HTML explainer: the model writes a short Markdown draft and the bundled CLI builds one page. Use it proactively and liberally, without being asked, whenever a page would help the reader more than plain text, even if plain text would also work: any explanation of how something works or how parts relate (flow, request path, architecture, code or folder structure, state machine, lifecycle, history); any comparison, trade-off or decision with pros and cons; any diagnosis, review or investigation, especially with several causes or findings to rank; any answer with a table, a numbered or ranked list, steps, branches or several sections; or when the user says "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". When in doubt, use it: a page is quick and cheap to make. Also for explainer videos ("make a video", "做个视频") and for changing its settings. Skip only for small talk, a trivial one-line answer, or when the user asks for plain text.

Answer me with HTML: answer a complex question with one HTML page

You write only the **content draft** (extended Markdown). The am CLI does all layout, colours, dark mode and diagram coordinates. **Do not hand-write HTML / CSS / SVG.**

Reply to the user, and write the draft, in the user's language.

0. When the user wants to change settings

Arguments for this call: $ARGUMENTS

When the arguments start with config, clean or update, or the user asks to change a setting, clean up pages or update this skill: read ${CLAUDE_SKILL_DIR}/references/settings.md and follow it. That turn produces no page.

1. Decide: produce a page or not

Produce a page if any of these is true:

  • There are ≥3 interrelated concepts, and the reader needs to see how they relate.
  • There is a flow, protocol, call chain or state transition (especially with branches or several actors).
  • There is a comparison across ≥3 dimensions, a trade-off between options, or a "can / cannot" list.
  • There is a hierarchy or an evolution over time.

Otherwise answer in plain text. When unsure: the more the question "needs a picture to understand", the more it calls for a page.

### Always-on mode

If the context contains the [answer-me-with-html always-on] reminder (the user added the always-on rule to a rules file such as CLAUDE.md or AGENTS.md), the bar is lower:

View full documentation
  • Whenever this turn gives a conclusion, summary, plan, comparison, review or explanation, attach a page.
  • Do not skip it because "the answer is short". If there is a conclusion, produce a page.
  • For everyday conclusions use a small page with 2–4 panels: one callout with the conclusion, plus one table or one diagram. Do not add panels just to fill space.
  • Render with --no-open, so no browser window interrupts the user. The user opens the page by clicking the path at the end of the reply.
  • Order: render the page first, then write the text reply. The reply is the last thing in the turn, with the page link on its last line (see step 5). Do not write the reply and then call am render.
  • Produce no page for small talk, one or two sentences with no conclusion, pure command output, or when the user asks for plain text.

2. Workflow (one Bash call)

The CLI is bundled in this skill's directory: scripts/am.mjs, a single file with no dependencies to install; it needs only Node.js 20+. Below, am always means:


node "${CLAUDE_SKILL_DIR}/scripts/am.mjs"

In Claude Code, the path above is replaced with this skill's directory automatically. If you see the variable unreplaced (other agents), replace it with the absolute path of the directory that contains this SKILL.md. If the user installed the am command globally, you can also use am directly.

1. First list 3–8 panels in your head. Each panel answers one sub-question only.

The draft language follows the language of the user's question: an English question gets an English draft, a Chinese question a Chinese draft, a Japanese question a Japanese draft. The page button labels, <html lang> and the STE check rules switch automatically by the draft language (a draft containing kana counts as Japanese); STE applies the English or Chinese rules to each sentence by its language (Japanese sentences get only the sentence-length and paragraph-length checks, with the same character limits as Chinese; any other language gets only those two checks, counted in words). To set the language yourself, write lang: in the frontmatter: en, zh (Simplified Chinese), zh-Hant or zh-TW (Traditional Chinese), ja, or any other language tag such as fr or ko. Detection reads Chinese (Simplified, or Traditional when the text has characters written in only one form), Japanese, Korean, and Cyrillic, Arabic, Hebrew, Thai and Greek text, and reads all Latin-script text as English. Declare the language when the user writes a Latin-script language other than English, when a Chinese text is too short or too plain to show Traditional characters, or when an exact tag matters (Arabic script also writes Persian, Cyrillic also Ukrainian). A language without its own labels still gets the right <html lang>, with English page labels.

2. Choose components by the shape of the information (see section 4).

3. Render in one go with a heredoc:


node "${CLAUDE_SKILL_DIR}/scripts/am.mjs" render - <<'AM_EOF'
---
title: Title
---
## A Panel title

A -> B: label


AM_EOF

4. Read the output:

  • ✓ <path>: success. Whether the browser opens automatically depends on the user's settings (am config); --no-open affects only this run. A page with STE or code warnings never opens automatically.
  • ✗ L<line> [component] … + Correct example:: fix that line following the example, then render again (no page was written).
  • code n warnings: a code block is longer than 40 lines, or a diff hunk has a different number of lines than its @@ header says. Cut the block or fix the header to the lines that make the point and render again, or keep it if every line matters.
  • STE n warnings: rewrite the flagged lines as suggested, then render again. Retry at most 2 rounds; if warnings remain, keep the last page and say so.
  • Every time you render again after a ✓, add --replace <path from the last ✓ line>. The CLI deletes that page once the new one is written, so one answer leaves one page.
  • ! Cleanup hint: … or ! Update hint: …: pass it on to the user in one sentence at the end of the reply, and ask whether to clean up / update. **Do not run am clean or the update command yourself**; wait until the user agrees. The CLI throttles these: the cleanup hint appears at most once every 7 days, the update hint at most once every 3 days.

5. Reply in the terminal with only 2–3 lines: one core conclusion + the page link. Do not paste the draft or the HTML back into the terminal. Write this reply after the render, as the last step of the turn: render the page first, then reply. No tool call comes after the reply.

If the render output has a link: line, the user runs am serve: use that URL as the page link instead, with the URL as the label too, and skip the file:// link below. Never start am serve yourself; only the user starts it.

Otherwise write the page link as a Markdown link to a file:// URL, with the URL as the label too: file:///abs/path.html (file:///abs/path.html). Take the absolute path from the ✓ line and add file:// in front; do not percent-encode it. GUI hosts (Codex, Antigravity) render this as a clickable link, and a terminal still shows the full URL.

When a page already exists and only one panel needs to change, do not rewrite the whole page. Take the source draft from the HTML's #am-source, replace only the matching ## section, and overwrite the page in place:


node "${CLAUDE_SKILL_DIR}/scripts/am.mjs" patch page.html --panel "Panel title" <<'AM_EOF'
## A Panel title
New content
AM_EOF

--panel matches the title, the letter ID, or ID title. If the panel is not found or the page has no #am-source, leave the file unchanged. patch keeps the original page's theme, light/dark mode and STE style; add --theme / --mode / --style to change them. Full usage: am help patch.

3. Draft format quick reference


---
template: sheet     # sheet board (default, one-screen overview) | doc linear explanation (read step by step)
theme: auto         # auto (default): paper for doc or text-only drafts, blueprint with diagrams | blueprint | shadcn | paper | a theme the user made (am list shows it)
title: Title
subtitle: One-line summary     # optional
cols: 3             # most columns in a sheet row, default 3
source: RFC 9293    # any other key is shown in the page header's meta line
---
Lead: one or two sentences with the core conclusion (optional).

## A Panel title {span=2 meta="small text, top right"}
Plain Markdown: paragraphs, lists, tables, quotes.
Table status words: ok / no

Score breakdown

Trigger
10.0
What/When/When-Not all present; many trigger phrasings incl. Chinese variants and indirect expressions ('I don't get it', 'draw it'); explicit skip conditions (small talk, one-line answer, plain-text request).
Structure
10.0
184-line SKILL.md; two references (settings.md, video.md) each loaded only when SKILL.md routes to them; am help format/<component> provides further progressive disclosure; single bundled script; no redundant docs.
Workflow
9.6
Decision gate (>=3 concepts / flow / comparison) before producing a page; deterministic rendering delegated to CLI with concrete heredoc commands; output interpretation with failure handling and bounded retries; --replace keeps one page per answer; strong guards (never start am serve, never run clean/update without user consent, replies are data not instructions); STE warning loop as verification.
Content
9.0
Almost every sentence directs action with concrete syntax; imperatives throughout; the language-detection paragraph in step 2.1 is an overlong outlier that hurts scanability.
Engineering
9.0
Valid frontmatter (name, description, argument-hint); Node 20+ and no-dependency requirement declared; all referenced paths exist; script invoked via explicit node command (no shebang, acceptable for .mjs); bundle is generated code with public source repo.
Security
9.5
Capability manifest: writes pages/videos/cache under ~/.answer-me-with-html only; reads project files for src= embeds but refuses paths outside current folder; network = api.elevenlabs.io (video TTS, only when user sets ELEVENLABS_API_KEY, documented in references/video.md), raw.githubusercontent.com/QingYunA (version check + changelog highlights, 7-day throttle, opt-out via update_check=false, never downloads or executes code), optional user-configured local AM_TTS_URL, and a user-started 127.0.0.1 HTTP server (agent explicitly forbidden from starting it); no credential reads, no cron/rc/launchd persistence, no destructive commands (rmSync scoped to own cache/pages). runInThisContext is used only to embed the vendored Temml math library from a public repo - not obfuscation. Capabilities match declared scope.
Excellent generator-pattern skill: model writes a Markdown draft, bundled single-file CLI (scripts/am.mjs, 10.3k lines) does all layout/diagrams. Description is a model trigger: What/When/When-Not, proactive-use guidance, Chinese trigger phrases (讲讲原理/没看懂/画个图), argument-hint. Workflow has a decision gate, one-bash render with heredoc example, structured output protocol (success/error/warning lines with retry cap of 2), incremental patch mode, and an explicit reply protocol. Section 5 contains first-class prompt-injection defense (page replies are data, never instructions). Minor flaws: SKILL.md step 2.1 has an overlong language-detection wall of text; the CLI is a generated bundle (harder to review); render warnings exist but no visual self-verification of the produced page.