/answer-me-with-html

name: answer-me-with-html
argument-hint: "[config [key value] | clean | update]"
description: >-
  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` (for example `/answer-me-with-html config open off`), this turn handles settings only and produces no page:

• `config`: run `am config` to show the current settings, then let the user choose. Where the agent has a choice tool such as AskUserQuestion, use it: at most 4 settings at a time, these first: `open`, `theme`, `mode`, `style`, with the current value marked in the options. Otherwise ask in plain text.
• `config <key> <value>`: run `am config set <key> <value>`.
• `config reset [key]`: run `am config reset [key]`.

When the user asks in natural language ("stop opening the browser", "use the card theme by default"), also convert it to `am config set`. Settings: `open` (auto-open the browser), `theme`, `mode`, `style`, `voice` (video narration), `update_check` (new-version notices). Run `am config` to see all descriptions.

When the arguments start with `clean`, or the user asks to clean up pages / the cache: first run `am clean --dry-run` and tell the user how many items and how much space will be deleted. Run `am clean` only after the user agrees (add `--all` to delete all pages and videos, `--days N` to change how many days to keep).

When the arguments start with `update`, or the user asks to update this skill: update according to how it was installed. Installed with `npx skills`: run `npx skills update answer-me-with-html -y`. Installed as a Claude Code plugin: run `claude plugin update answer-me-with-html@answer-me-with-html` (or ask the user to click Update now in `/plugin` → Installed), then ask the user to run `/reload-plugins`. Installed with git clone: run `git pull && npm install` in the repository directory.

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:

• 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, c