# Show Me HTML
> 将素材制作成可离线阅读、便于团队转发的单文件 HTML 页面；用于明确的页面或可视化交付请求。
- Skill: `master-g/show-me-html` (Agent Skill, multi-file: 77 files)
- Install (CLI): `npx skillmds@latest add master-g/show-me-html`
- Raw SKILL.md: https://api.skillmd.com/api/skills/master-g/show-me-html/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: master-g (https://skillmd.com/u/master-g)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/master-g/show-me-html
---
# show-me-html
一个材料主题交付一个 `.html`。使用自有编辑式视觉系统，保留三态主题、Markdown 复制与目录。
## 意图与材料
用户显式调用时，HTML 交付意图已确定，直接使用参数或本会话已有材料。不要再问是否要 HTML。
仅在缺少必要材料或有会改变交付结果的实质歧义时提问；可合理推断的读者、版式和交互自行选择。
默认简体中文，代码、标识符和引用保留原样；其他语言按用户要求并同步 `lang`。
- URL：复用已提取正文，否则按用户指定工具、站点技能、通用提取、浏览器的适用顺序取材。工具以当前环境可用能力为准。
- 当前仓库：读取相关代码、diff 或历史，事实与引用以实际材料为准。
- 已有 HTML：在用户指定范围内修改，不默认把小修变成全页重做。
- 仅有主题：从会话取材；仍缺少的必要事实明确标注或提问。
页面保留任务所需事实及来源，可摘要与删去无关内容。不要为了填满配方编造数字、案例或结论。
材料不足的章节删除，或标 `[DATA NEEDED: 缺什么]`，在交付中说明。
## 选择页面结构
在 [配方](references/layouts.md) 中只读选中的条目：
| 读者任务 | 配方 |
| ---------------------- | ---------------------------------------------------------------- |
| 比较代码或视觉方案 | `approach-compare` / `visual-directions` |
| 评审或介绍代码改动 | `code-review` / `pr-writeup` |
| 理解仓库、功能或概念 | `code-understanding` / `feature-explainer` / `concept-explainer` |
| 查阅设计系统、比较组件 | `design-system-ref` / `component-variants` |
| 体验动效或交互 | `animation-proto` / `interaction-proto` |
| 演讲或拿走示意图 | `slide-deck` / `svg-illustrations` |
| 截图转发一个结论 | `share-card` |
| 查看状态、故障、计划 | `status-report` / `incident-report` / `implementation-plan` |
| 追踪流程、分拣条目 | `flowchart` / `triage-board` |
| 编辑配置或文案 | `config-editor` / `text-tuner` |
无精确匹配时使用最接近的配方组合材料特有部分；不要创造空章节或无用途控件。
`data-recipe` 仍使用构建器支持的配方名。
## 合成与验证
新页面从 `assets/shell.html` 开始，说明选定结构后直接继续。
读取 [合成与验收](references/compose-and-check.md) 中适用部分，以及 [视觉系统](references/visual-system.md)。
写 markup 时只查 [组件](references/components.md) 中实际需要的 DOM、ARIA 和 `data-*` 契约。
画示意图时读 [图示规则](references/diagrams.md)；材料含数值、占比、分布、网络或流向时读 [数据图规则](references/charts.md)，
先判数据形状再从图型目录选编号，渲染块从 `assets/gallery/` 复制；加交互时读 [交互实现](references/interactions.md)。
必须保留：
- 未合成源码中的 `` / ``；合成后占位符由内联资源替代，编辑成品时不重新插入。两种状态都保留工具条和目录，内容位于 `main#doc`，直接子元素为 `section`。
- `show-me.css` 的语义 token、现有组件契约与可访问的键盘路径；页面只补材料特有几何。
- 公式写 LaTeX（行内 `$…$` 线性，块级 `$$…$$`），由构建器编译成 MathML；不手写 `