conversation-to-html

用途

conversation-to-html 用于将对话上下文捕获为一个带样式的 .html 文件，内容可以是摘要、代码差异、关键决策，或它们的任意组合。生成的文件写入 /tmp/ 目录，并在浏览器中打开。

主要能力

根据上下文推断内容类型：
- 近期代码改动 / git diff → diff 视图
- 讨论 / 决策 / 解释 → summary 视图
- 两者兼有 → mixed 视图
根据主题确定标题。
读取模板文件：~/.claude/skills/conversation-to-html/template.html
构建 {{BODY}} HTML 内容区块。
替换所有占位符并写入 /tmp/cc-<slug>-<timestamp>.html。
打开生成的文件：open /tmp/cc-<slug>-<timestamp>.html

使用方式

快速开始流程：

从上下文推断内容类型（diff / summary / mixed）。
根据主题确定标题。
读取模板：~/.claude/skills/conversation-to-html/template.html
构建 {{BODY}} HTML（见下方内容区块）。
替换所有占位符并写入 /tmp/cc-<slug>-<timestamp>.html。
打开文件：open /tmp/cc-<slug>-<timestamp>.html

占位符

占位符	值
`{{TITLE}}`	推断或用户提供的标题
`{{DATE}}`	当前日期/时间
`{{PROJECT}}`	当前工作目录项目名或分支
`{{TYPE}}`	Summary / Diff / Mixed
`{{BADGE_CLASS}}`	badge-summary / badge-diff / badge-mixed
`{{BODY}}`	生成的 HTML 内容区块

内容区块

摘要内容：

<section>
  <h2>Overview</h2>
  <p>...</p>
</section>
<section>
  <h2>Key Points</h2>
  <ul><li>...</li></ul>
</section>
<section>
  <h2>Decisions</h2>
  <div class="card">...</div>
</section>

差异内容：

<section>
  <h2>Changes</h2>
  <div class="diff-file">
    <div class="diff-filename">path/to/file.ts</div>
    <div class="diff-line diff-hunk">@@ -10,6 +10,8 @@</div>
    <div class="diff-line diff-ctx"> unchanged line</div>
    <div class="diff-line diff-del">-removed line</div>
    <div class="diff-line diff-add">+added line</div>
  </div>
</section>

代码块：

<pre><code>// code here</code></pre>

标签 / 元数据：

<div><span class="tag">label</span><span class="tag">label2</span></div>

规则

始终先读取模板——绝不凭记忆内联 CSS/HTML。
在 diff 行中转义 HTML 特殊字符（< > &）。
Slug = 标题小写、空格转连字符、去除特殊字符。
Timestamp = Date.now() 等价物（通过 Bash 使用 date +%s）。
写入后始终打开文件——向用户确认路径。
最大保真度：优先使用来自 git diff 的真实差异行，而非转述。

适用场景

需要把一段对话中的代码改动整理成可浏览的 diff 页面。
需要把讨论、决策或解释整理成结构化的摘要页面。
需要同时呈现摘要与差异的混合视图。

限制

依赖模板文件 ~/.claude/skills/conversation-to-html/template.html 的存在。
输出写入 /tmp/ 目录，属于临时文件。
关于收费、价格、平台支持范围等信息，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

占位符

内容区块

规则

适用场景

限制