answer-me

answer-me: answer complex questions with a one-page HTML

You only writethe content draft(extended Markdown). Layout, color scheme, dark mode, and graphic coordinates are all handled by the am CLI.Do not hand-write HTML / CSS / SVG.

1. Decide: whether to produce a page

Produce a page if any one condition is met:

There are ≥3 interrelated concepts, and the reader needs to see their relationships.
There is a process, protocol, call chain, or state transition (especially with branches or multiple participants).
There is a comparison across ≥3 dimensions, a trade-off between options, or a "can / cannot" list.
There is a hierarchical structure or temporal evolution.

If none are met, answer with ordinary text. When unsure, the more a question "requires a diagram to be understood," the more you should produce a page.

2. Workflow (one Bash call)

The CLI is already packaged in this skill directory:scripts/am.mjs, a single file, no dependencies to install, requiring only Node.js 20+. Below, am all refer to:

node "<本 skill 目录>/scripts/am.mjs"

<本 skill 目录> is the directory where this SKILL.md is located (the absolute path is given when the skill is loaded). If the user has already globally installed the am command, you can also directly use am。

First list 3–8 panels in your head. Each panel answers only one sub-question.
Choose components by information shape (see Section 4).
Render all at once with a heredoc:

node "<本 skill 目录>/scripts/am.mjs" render - <<'AM_EOF'
---
title: 标题
---
## A 面板标题
```flow
A -> B: 标签
```
AM_EOF

Read the output:
- ✓ <路径>: success. The page has been opened in the browser.
- ✗ L<行号> [组件] … + correct example: modify that line according to the example, 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.
In the terminal, reply with only 2–3 lines: one core conclusion + the page path. Do not paste the draft or HTML back into the terminal.

3. Draft format quick reference

---
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 may be omitted; they are assigned automatically.
html / svg fenced blocks are embedded as-is,use only when components truly cannot express it。
Full documentation:am help format; component syntax:am help <组件名>; component list:am list。

4. Choose components by information shape

Information shape	Component	Minimal syntax
Who connects to whom, architecture, decision branches	`flow [LR]`	`A -> B: 标签`，`A --> C` dashed line,`A -> B & C` fan-out,`{判断?}` `(开始)` `[(数据库)]`，`*重点`，`group 名: A, B`
Messages between participants over time	`sequence [num]`	`A -> B: 请求`，`B --> A: 响应`，`note A, B: 说明`，`== 阶段 ==`
Hierarchy / directory / classification	`tree [list]`	Indentation expresses hierarchy,`标签 \| 说明`，`编号` 标签
History / stages	`timeline [v]`	`时间 \| 标题 \| 说明`，`*` highlight
Values and limits	`limits`	`标签 \| 13 / 20 \| 单位`, write only the limit:`标签 \| max 20`
Word-by-word commentary on one sentence	`annot`	`# 小标题 \| 右注`，`[片段]{注释}`，`[错词]{!红色注释}`，`> 底注`
Meta information / title bar	`kv [cols=2]`	`键: 值`，`* 宽格: 值`
Conclusion / warning	`callout <info\|ok\|warn\|err> 标题`	Body Markdown
Multi-dimensional comparison, can / cannot list	Markdown table	Status column values: ok / no / warn

Selection principles:

Put the conclusion first. The first panel or introduction gives the core answer; later panels provide the evidence.
One panel, one question. If there are more than 8 panels, split the page or cut content.
Use span to give the densest panels more width; give equal-width sentences (annot) at least span=2.
Do not make up data. If there are no real numbers, do not use limits; for illustrative data, state "illustrative" in the description.

5. STE controlled writing (text in the manuscript)

am render is checked automatically, and by default only warns (style: 80）；style: strict if it does not meet the standard, it is not generated;style: off off.

One sentence says only one thing.
Use active voice. Use imperative sentences for steps ("Close the valve," not "The valve should be closed").
One word, one meaning. Use the same term for the same thing throughout.
Sentence length limits: steps (ordered lists) 20 words in English / 35 characters in Chinese; descriptions 25 words in English / 45 characters in Chinese.
Each paragraph has no more than 6 sentences. Use lists for complex content.
Use common short words in English: use, not utilize; start, not commence; before, not prior to.
In Chinese, do not use empty verbs ("进行优化"→"优化", "加以说明"→"说明"), do not use more than three "的" in a row, and do not use clichés (赋能、闭环、至关重要……).
For deliberately shown counterexamples, use ~~删除线~~, or put them in a table row with status no , and the check will skip them.