answer-me-with-html

Original：🇨🇳 Chinese

Translated

1 scripts

Turn complex explanations into a one-page visual HTML explainer: the model writes only an extended Markdown content draft, while the skill’s bundled CLI handles templates, components, automatic SVG layout, and STE controlled-writing checks to produce a single-file page in one call. Use this skill as well when the user says `/answer-me-with-html config` or wants to change settings (automatically opening the browser, always-on mode, default theme). Proactively use it, without waiting for the user to ask, whenever an answer involves any of the following: ≥3 interrelated concepts; a flow/protocol/architecture with branches or multiple participants; a comparison or trade-off across ≥3 dimensions; a hierarchy (table of contents, modules, taxonomy); an evolutionary history or stages; or the user says "explain the principles / I didn’t get it / draw a diagram / explain this codebase / explain it with HTML / explain visually." Do not use it for: short Q&A that can be answered in under 200 characters, commands that need to be copied and executed immediately, pure code modifications, or when the user explicitly requests plain text.

12installs

Sourceqingyuna/answer-me-with-html

Added on2026-10-03

NPX Install

npx skill4agent add qingyuna/answer-me-with-html answer-me-with-html

SKILL.md Content (Chinese)

View Translation Comparison →

Answer Me with HTML: Answer Complex Questions with a One-Page HTML

Write only the content draft (extended Markdown). The

am

CLI handles all layout, colors, dark mode, and graphic coordinates. Do not hand-write HTML / CSS / SVG.

0. When the User Wants to Change the Configuration

Invocation arguments:

$ARGUMENTS

When the arguments start with

config

(for example,

/answer-me-with-html config open off

), handle only the configuration in this turn and do not generate a page:

```
config
```
: Run
```
am config
```
to display the current configuration, then ask the user which setting they want to change.

config <key> <value>

: Run

am config set <key> <value>

.

```
config reset [key]
```
: Run
```
am config reset [key]
```
.

When the user makes the request in natural language ("Stop automatically opening the browser" "Turn off always-on mode" "Use the card theme by default"), convert it to

am config set

in the same way. Available settings:

open

(open the browser automatically),

always

(always-on mode),

theme

,

mode

, and

style

. Run

am config

to see all descriptions.

1. Decision: Whether to Generate a Page

Generate a page if any of the following applies:

There are ≥3 interrelated concepts, and readers need to see how they relate.
There is a flow, protocol, call chain, or state transition, especially with branches or multiple participants.
There is a comparison or trade-off across ≥3 dimensions, or a "can / cannot" checklist.
There is a hierarchical structure or a timeline of evolution.

If none applies, answer with ordinary text. When in doubt, the more a question requires a diagram to be understood, the more likely it should be a page.

Always-On Mode

If the context contains an

[answer-me-with-html always-on]

reminder (the user has installed the answer-me-with-html-always plugin or enabled always-on mode in a rules file), lower the threshold:

Whenever this turn provides a conclusion, summary, proposal, comparison, review, or explanation, attach a page.
Do not skip it merely because the answer is short. Any conclusion warrants a page.
For routine conclusions, use a small 2–4-panel page: one callout for the conclusion, plus one table or diagram. Do not add panels merely to fill space.
When rendering, add
```
--no-open
```
so the browser does not open and interrupt the user. The user can click the path at the end of the response to open it.
In the terminal, still lead with the textual conclusion, then add the page path on the final line.
Do not generate a page for small talk, one- or two-sentence responses with no conclusion, pure command output, or when the user requests plain text.

2. Workflow (One Bash Call)

The CLI is already bundled in this skill’s directory:

scripts/am.mjs

. It is a single file, requires no dependency installation, and only needs Node.js 20+. All references to

am

below mean:

bash

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

In Claude Code, the path above is automatically replaced with this skill’s directory. If you see an unreplaced variable (in another Agent), replace it with the absolute path to the directory containing this SKILL.md. If the user has installed

am

globally, they can also invoke

am

directly.

First, mentally outline 3–8 panels. Each panel should answer only one sub-question.
Choose a component based on the shape of the information (see Section 4).
Render everything in one heredoc:

bash

node "${CLAUDE_SKILL_DIR}/scripts/am.mjs" render - <<'AM_EOF'
---
title: 标题
---
## A 面板标题
```flow
A -> B: 标签
```
AM_EOF

Read the output:
- ```
✓ <路径>
```
  : Success. Whether the browser opens automatically depends on the user’s configuration (
```
am config
```
  ); adding
```
--no-open
```
  affects only this run.
- ```
✗ L<行号> [组件] …
```
  plus a correct example: Follow the example to correct that line, then render again.
- ```
STE n 条警告
```
  : Rewrite the corresponding line as suggested, then render again. Retry at most 2 rounds; if warnings remain, keep the page and explain them.
Reply in the terminal with only 2–3 lines: one core conclusion and the page path. Do not paste the draft or HTML back into the terminal.

3. Draft Format Quick Reference

markdown

---
template: sheet     # sheet 图纸板（默认，一屏总览）| doc 线性讲解（逐步阅读）
theme: blueprint    # blueprint 图纸风（默认）| shadcn 卡片风
title: 标题
subtitle: 一句话说明     # 可选
cols: 3             # sheet 列数，默认 3；面板用 span / rows 跨列跨行
source: RFC 9293    # 其他任意键显示在页头元信息行
---
导语：一两句核心结论（可选）。

## A 面板标题 {span=2 meta="右上角小字"}
普通 Markdown：段落、列表、表格、引用。
表格状态词：ok / no / warn（可带文字："ok 已批准"）→ ✓ / ✗ / ! 徽章。

## B {bare}            ← bare：无标题栏（适合放 kv 标题栏块）

Panel letter IDs are optional and are assigned automatically.
```
html / 
```
svg fenced blocks are embedded verbatim, and should be used only when a component truly cannot express the content.
Full documentation:
```
am help format
```
; component syntax:
```
am help <component>
```
; component list:
```
am list
```
.

4. Choose a Component Based on the Information Shape

Information shape	Component	Minimal syntax
Connectivity, architecture, decision branches	`flow [LR]`	`A -> B: label` , `A --> C` for a dashed line, `A -> B & C` for fan-out, `{decision?}` , `(start)` , `[(database)]` , `*key point` , `group name: A, B`
Messages between participants over time	`sequence [num]`	`A -> B: request` , `B --> A: response` , `note A, B: explanation` , `== phase ==`
Hierarchy / directory / taxonomy	`tree [list]`	Use indentation for hierarchy, `label \| description` , `id` label
History / stages	`timeline [v]`	`time \| title \| description` , `*` for highlighting
Numerical values and limits	`limits`	`label \| 13 / 20 \| unit` ; for a limit only: `label \| max 20`
Line-by-line commentary on a sentence	`annot`	`# heading \| note` , `[fragment]{note}` , `[wrong term]{!red note}` , `> footnote`
Metadata / title bar	`kv [cols=2]`	`key: value` , `* wide cell: value`
Conclusion / warning	`callout <info\|ok\|warn\|err> title`	Markdown body
Multidimensional comparison, can / cannot checklist	Markdown table	Write `ok / no / warn` in the status column

Selection principles:

Put the conclusion first. Use the first panel or introduction for the core answer, and use subsequent panels for evidence.
Ask one question per panel. If there are more than 8 panels, split the page or remove some.
Use
```
span
```
to give the information-dense panel more width; equal-width sentences (
```
annot
```
) need at least
```
span=2
```
.
Do not fabricate data. If there are no real numbers, do not use
```
limits
```
; label illustrative data as "illustrative" in the description.

5. STE Controlled Writing (Text in the Draft)

am render

checks the draft automatically. It only issues warnings by default (

style: 80

);

style: strict

prevents generation when the standards are not met;

style: off

disables the checks.

Use one idea per sentence.
Use active voice. Write steps as imperatives ("Close the valve," not "The valve should be closed").
Use one term for one meaning. Refer to the same thing by the same name throughout the document.
Sentence-length limits: steps (ordered lists) 20 words in English / 35 characters in Chinese; descriptions 25 words in English / 45 characters in Chinese.
Keep each paragraph under 6 sentences. Use lists for complex content.
In English, use common, short words: use instead of utilize, start instead of commence, and before instead of prior to.
In Chinese, avoid empty verbs ("perform optimization" → "optimize," "provide an explanation" → "explain"), do not use more than three consecutive "的" characters, and avoid clichés ("empower," "close the loop," "crucial," and so on).
Mark intentional counterexamples with
```
~~strikethrough~~
```
, or place them in a table row with status
```
no
```
; the checker skips them.