quick-view

快速查看

生成精简的 HTML，以便在浏览器中查看结构化数据。样式尽量简洁，可读性尽可能高。

适用场景

• 用户想查看在终端中难以阅读的输出
• 适合通过视觉布局查看的列表、表格、草稿、摘要
• 用户说：“给我看看”“查看这个”“整理成便于查看的形式”“以网页形式打开”

输出规则

应该：

• 使用语义化 HTML：<table>、<ul>、<details>、<pre>、<h1-3>
• 使用带 CSS 变量的基础模板
• 写入 _private/views/
• 使用 open _private/views/{filename} 打开

不应该：

• 添加基础模板之外的装饰性样式
• 使用 CSS 框架
• 过度设计，或“美化”页面

文件命名

视图有其生命周期：临时 → 保留 → 归档。

阶段	文件名	适用时机
临时	name-temp.html	新建视图时的默认状态
保留	name.html	用户说“保留这个”“这个不错”
归档	name.2025-01-01.html	提升新版本时，归档之前的保留版本

规则：

1. 始终使用 -temp 后缀创建 — 每个新视图都从 name-temp.html 开始
2. 获批后提升 — 用户批准后，将文件重命名为 name.html
3. 替换前先归档 — 如果 name.html 已存在，先将其重命名为 name.DATE.html，再提升新版本
4. 绝不重新生成保留版本 — 仅重新生成 -temp 文件

工作流： 请参阅 references/full-guide.md（§ 文件命名生命周期示例），了解跨多次迭代从临时版本 → 保留版本 → 归档版本的操作流程。

提升版本的触发语：

• “保留这个”“这个不错”“保存这个”
• “设为默认”“就定这个”
• “我喜欢这个”

基础模板

每个快速查看 HTML 文件都使用 ${CLAUDE_SKILL_DIR}/assets/base-template.html 中的基础模板。加载模板以获取完整的 HTML 结构，其中包含 CSS 变量、深色模式支持、截断切换脚本和类型边框类。生成输出时，替换 {title}、{timestamp}、{count} 和 {content} 占位符。

模式

条目列表

<h1>Title</h1>
<ul>
  <li><strong>@username</strong> — action item</li>
</ul>

表格

<table>
  <tr><th>Contact</th><th>Action</th><th>Draft</th></tr>
  <tr><td>@name</td><td>Follow up</td><td>Hey...</td></tr>
</table>

可展开的部分（适用于长内容）

<details>
  <summary><strong>@username</strong> — action</summary>
  <div class="truncate">
    <pre>Long content here that may need truncation...</pre>
  </div>
</details>

按类型区分的条目

<div class="type-user">User message or input</div>
<div class="type-draft">Draft content</div>
<div class="type-done">Completed item</div>

带操作项

<p>
  <a href="tg://resolve?domain=username">Open Telegram</a> ·
  <button onclick="navigator.clipboard.writeText('draft text')">Copy</button>
</p>

带来源的数据（引用与深入查看）

显示从外部来源收集的数据时，始终添加归属链接，以便深入查看。

添加到基础模板 CSS 中：

.source { color: var(--muted); font-size: 0.75rem; }
.source a { color: var(--muted); }
.source a:hover { color: var(--accent); }

行内归属信息（列表首选）：

<div class="tip">
  <strong>Tip title</strong> — Description of the tip.
  <span class="source">— <a href="https://x.com/user/status/123">@username</a></span>
</div>

带来源列的表格：

<table>
  <tr><th>Tip</th><th>Source</th></tr>
  <tr>
    <td>Description here</td>
    <td class="source"><a href="https://x.com/user/status/123">@user</a></td>
  </tr>
</table>

在摘要中包含来源的可展开内容：

<details>
  <summary><strong>Tip title</strong> <span class="source">— <a href="URL">@source</a></span></summary>
  <p>Full content...</p>
</details>

包含主要来源的元信息标题：

<p class="meta">
  Generated: {timestamp} · {count} items ·
  Source: <a href="https://x.com/user/status/123">Original thread</a>
</p>

原则：

• 数据来自外部来源时，始终链接到原始来源
• 社交媒体使用 @username，文章使用域名
• 来源链接应弱化显示，不要过于醒目
• 如果集合中的内容来自同一来源，请在元信息标题中注明主要来源

可编辑草稿（带差异跟踪）

适用于用户可能会在发送前编辑的草稿。跟踪原始内容与编辑后的内容，以便后续分析。

请参阅 references/full-guide.md（§ 可编辑草稿标记、§ 可编辑草稿脚本），了解 <details> 标记，以及要放在 </body> 结束标签前的 saveDraft/copyDraft/restoreEdits/exportEdits 脚本。

使用可编辑草稿时，在标题中添加导出按钮：

<p class="meta">Generated: {timestamp} · {count} drafts · <button onclick="exportEdits()">Export Edits</button></p>

工作流

1. 确定要显示的数据（文件、变量、最近的输出）
2. 选择模式：列表、表格或可展开的部分
3. 使用上面的模板生成 HTML
4. 写入 _private/views/{name}-temp.html
5. 运行 open _private/views/{name}-temp.html
6. 如果用户批准，将文件提升为 {name}.html

示例

用户：“显示草稿”

Agent：

1. 读取 _private/drafts/outreach_drafts.md
2. 解析每份草稿（标题 = 联系人，正文 = 草稿）
3. 为每份草稿生成带有 <details> 的 HTML
4. 写入 _private/views/drafts-temp.html
5. 运行 open _private/views/drafts-temp.html

结果：浏览器打开，用户看到可展开的草稿列表，支持自动切换深色/浅色模式，长内容会截断并显示“显示更多”，还可以逐份复制。

用户：“看起来不错，保留吧”

Agent：

1. 将 drafts-temp.html 重命名为 drafts.html
2. 确认：“已保存为 drafts.html”

样式交接

此技能生成的 HTML 功能完善，但样式较简洁。要添加完整的视觉样式，请在生成后调用 html-style 技能。

quick-view 使用的类（与 html-style 兼容）：

类	用途
.type-user	用户输入/消息
.type-draft	草稿内容
.type-done	已完成的项目
.source	署名链接
.meta	元数据标题
.truncate	长内容容器
.actions	操作按钮容器

JS 钩子的数据属性：

• data-username — 草稿的标识符
• data-original — 用于差异跟踪的原始文本

署名

截断模式和 CSS 变量方案的灵感来自 simon willison 的 claude-code-transcripts。