to-html

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/to-html - Render anything as a polished standalone HTML file

/to-html - 将任意内容渲染为精美的独立HTML文件

The user wants whatever you would have written as a chat reply turned into a single, self-contained, good-looking HTML file. They typically want to open it, screenshot it for a colleague, paste it somewhere, or read it as a document instead of scrolling a terminal.

This skill is about the output format and delivery, not the content. The content can be anything: an explanation of a concept, a bug and a fix plan, a findings-and-options decision doc, a draft to copy. Do not impose any domain-specific vocabulary on the content. The look is fixed; the substance is whatever the user asked about.

用户希望将原本会以聊天回复形式呈现的内容转换为单个、独立、美观的HTML文件。他们通常想要打开该文件、截图发给同事、粘贴到其他地方，或者将其作为文档阅读，而非在终端中滚动查看。

本技能关注的是输出格式与交付方式，而非内容本身。内容可以是任何形式：某个概念的解释、漏洞及修复方案、包含调查结果与选项的决策文档、可供复制的草稿等。请勿在内容中加入任何特定领域的词汇。视觉样式固定，内容则完全取决于用户的需求。

Workflow

工作流程

1. Settle the content first

1. 先确定内容

Know what you are explaining before you open an HTML tag. If the user pointed at a diagram, a diff, a bug, an idea, gather and understand it the same way you would for a normal reply. The HTML is a rendering of a clear answer, not a substitute for having one.

在开始编写HTML标签前，明确要解释的内容。如果用户指向了某个图表、代码差异、漏洞或想法，先像处理普通回复一样收集并理解这些信息。HTML是清晰答案的呈现形式，而非替代答案本身。

2. Build the file per FORMAT.md

2. 按照FORMAT.md构建文件

Read FORMAT.md and follow it. The short version:

One self-contained
```
.html
```
file. The only external resources are the Tailwind CDN and the Mermaid ESM import. No build step, no app code.
Editorial, not corporate-dashboard. Generous whitespace, sparse prose, one accent color, red for problems, amber for warnings.
Diagrams carry the weight. Mix Mermaid with hand-built boxes/SVG so it does not look generic. If a diagram needs a paragraph to be understood, redraw it.

阅读FORMAT.md并遵循其中规范。简要说明：

单个独立的
```
.html
```
文件。仅依赖Tailwind CDN和Mermaid ESM导入这两个外部资源，无需构建步骤或应用代码。
采用编辑风格，而非企业仪表盘风格。留白充足、文字简洁、单一强调色，红色用于标识问题，琥珀色用于标识警告。
图表为核心内容。结合Mermaid与手工绘制的方框/SVG，避免视觉效果过于通用。如果某个图表需要搭配段落才能理解，请重新绘制。

3. Write it where the user can get at it

3. 将文件保存到用户可访问的位置

Inside a git repo: write to
```
tmp/<descriptive-name>.html
```
in the repo root (create
```
tmp/
```
if missing). Outside a repo: use the OS temp dir.

Name it for the content (

cross-matrix-explainer.html

ticket-4309-findings.html

), not after this skill.

Print the absolute path. Offer to open it with
```
xdg-open
```
(Linux) but do not open it unprompted.

若在git仓库内：保存到仓库根目录的
```
tmp/<描述性名称>.html
```
（若
```
tmp/
```
不存在则创建）。若不在仓库内：使用系统临时目录。
根据内容命名文件（例如
```
cross-matrix-explainer.html
```
、
```
ticket-4309-findings.html
```
），而非以本技能命名。
打印文件的绝对路径。可提议使用
```
xdg-open
```
（Linux系统）打开文件，但请勿未经用户同意直接打开。

4. Self-check, then stop

4. 自我检查后停止交付

Before handing over, confirm: the file is self-contained (no external scripts or assets beyond the Tailwind CDN and the Mermaid import), every section carries a visual (diagram, comparison, or before/after), no prose paragraph stands alone without a visual or bullets beside it, and it links to its sources and any sibling or index docs that exist. Fix whatever fails.

This skill produces the artifact, it does not iterate to perfection on its own. If the user wants it polished further, that is a separate pass (e.g. /impeccable).

交付前，请确认：文件是独立的（除Tailwind CDN和Mermaid导入外无其他外部脚本或资源）、每个部分都配有视觉元素（图表、对比图或前后变化图）、没有单独存在的文字段落（需搭配视觉元素或项目符号），且文件已链接到其来源及所有存在的关联文档或索引文档。修复所有不符合要求的部分。

本技能仅生成成品，不会自行迭代至完美状态。如果用户希望进一步优化，需单独进行处理（例如使用/impeccable技能）。