html-data-explorer

HTML 数据探索器

对于临时数据探索——有人粘贴的 CSV、API 返回的 JSON 转储、生产环境中的日志文件——打开 Tableau，甚至 Jupyter Notebook，都有些小题大做。一个自包含的 HTML 文件，将数据直接嵌入其中，并配有可筛选的表格、几个图表和分面搜索，构建和分享都更快捷。

预备步骤 — 写入产物前运行

首先调用 html-skills:html-skills-listen（Skill 工具）；该操作可安全重复执行。如果它返回 URL，请将其原样注入即将编写的 HTML 中，作为 window.__CLAUDE_SUBMIT_URL__，包括 ?t= 查询字符串（这是本地的单会话回环握手，不是凭据）。如果它报告处于 web/sandbox 模式，则省略该行；此时 submitToClaude 会回退到剪贴板模式。

何时使用此技能

• “查看 / 分析 / 探索这个 CSV / JSON / 日志数据”
• “为这些数据展示 [图表、筛选器、细分]”
• “帮我为 X 快速搭建一个仪表板”
• “帮我找出 Y 所在的行”
• 粘贴表格数据，并隐含要求“用这些数据做点有用的事”
• 日志文件，且问题是“时间 T 左右发生了什么”

输出要求

将数据作为 JS 对象 / 数组嵌入文件中——无需单独加载其他文件，也不调用 fetch。只能在完成下文强制要求的敏感信息移除检查后，才能嵌入数据——该产物是为分享而构建的，因此所有嵌入的内容都会随文件一同传递，包括当前筛选器隐藏的行和列。筛选和制图完全在浏览器中进行。应用筛选器时，预聚合视图会实时更新。

如果数据集太大，内联数据不太方便（>~5MB），仍需将其内联，但要提醒用户文件大小，并说明文件包含完整数据集，包括被筛选掉的行；否则，该产物就失去了“直接发送链接”这一优势。

嵌入前脱敏密钥（强制）

此产物会在页面源代码中嵌入完整数据集——筛选器只会隐藏视图中的行，不会从文件中删除这些行；共享链接会包含全部数据。日志和 API 转储中经常会带有 Authorization 标头、Cookie 和密钥。对于任何并非小到微不足道的数据集，都要以编程方式扫描——使用脚本或正则表达式遍历每一行——绝不能手动阅读或抽样查看行；基于样本的扫描会漏掉关键行。将数据嵌入之前：

1. 将字段名作为完整词元扫描（不区分大小写和分隔符）：password、passwd、secret、token、api_key/apikey、authorization、auth、cookie、session、bearer、private_key、client_secret、access_key。仅匹配完整词元——author、authorized_amount、auth_method 和 session_id 列通常是无害的分析键。若只有名称匹配，而值看起来不像凭据，则将其标记出来并询问用户，不要默默删除可用于分析的列。

2. 无论字段名如何都要扫描值——包括但不限于：AKIA[0-9A-Z]{16} 以及紧邻其后的 40 个字符的 AWS 密钥、ghp_/github_pat_、sk-/sk_live_/rk_live_（要求长度和字符集合理，不能只匹配前缀）、xox[abprs]-、AIza…、glpat-、npm_、三段式 eyJ… JWT、-----BEGIN … PRIVATE KEY----- 块、原始日志行中的 Authorization: Bearer/Basic … 和 Cookie/Set-Cookie 标头、URL 和连接字符串中的凭据（postgres://user:pass@…、mongodb+srv://…、?api_key=、?access_token=），以及凭据名称字段中的任何长高熵字符串。令牌格式会不断变化——将此列表视为示例，并对类似内容作出判断。

3. 将每个命中项替换为稳定的带索引占位符——[REDACTED:aws-key#1]、[REDACTED:jwt#2]——相同原始值映射到相同占位符，不同值映射到不同占位符。保留行结构、分面基数、分组统计以及跨行关联。

4. 在聊天中报告脱敏的类别和数值数量——绝不要在摘要中复现原始值。

5. 逐字嵌入需要用户明确选择同意。 仅当用户在获知文件是包含完整数据集、可供分享的产物，而不只是可见行之后确认，才可嵌入已标记的值。（合理的情况：正在分析的数据集本身就是泄露密钥列表。此项选择特意不同于 html-research-reports，后者绝不会嵌入真实凭据——报告是可分享的叙述，而这里被标记的值可能正是待分析的数据。）

6. 产物本身不需要有效凭据——禁止抓取的规则保证了这一点；所有导出路径都会输出嵌入的（已脱敏）值。

7. 宣布完成前验证生成的文件——写入 .html 后，在文件本身上运行第 2 步的值模式，确认没有看起来像凭据的内容在转换或模板步骤中漏网。可从以下现成代码开始（根据数据集实际命中的第 2 步模式进行扩展）：

   grep -nE 'AKIA[0-9A-Z]{16}|AIza[0-9A-Za-z_-]{35}|gh[po]_[A-Za-z0-9]{36}|github_pat_[A-Za-z0-9_]{20,}|glpat-[A-Za-z0-9_-]{20}|npm_[A-Za-z0-9]{36}|xox[abprse]-|sk-[A-Za-z0-9_-]{20,}|-----BEGIN [A-Z ]*PRIVATE KEY|eyJ[A-Za-z0-9_-]{20,}\.|[?&](api_key|access_token|token|sig|X-Amz-Signature)=[^<&[]|://[^/[:space:]:@]+:[^@[:space:]<[&][^@[:space:]<]*@' <file>.html
   

   无输出即为通过；如果有命中项不是 [REDACTED:…] 占位符，请进行检查。

核心结构

1. 页眉——数据集内容、行数、涵盖的时间范围（若有时间信息），并说明此文件中嵌入了 N 行完整数据集——筛选器会改变视图，不会改变文件
2. 筛选栏——用于缩小数据范围的分面/筛选器
3. 摘要面板——随筛选条件变化而更新的计数和聚合值
4. 主视图——表格、图表或两者兼有（通常两者兼有）
5. 详情抽屉——点击一行即可查看完整记录
6. 导出——复制筛选后的子集、复制类似 SQL 的谓词等

模式

模式 A：可筛选表格

适用于用户想要查找符合条件的行的表格数据。列可排序，支持搜索，每列均可多选筛选。始终显示行数。点击行可展开。

行数超过约 500 时使用分页。行数超过 5000 时使用虚拟化（例如，仅渲染可见内容）。

模式 B：分面搜索

适用于包含分类字段的数据。侧边栏显示多个分面，每个分面列出各个值的计数。点击即可筛选。多个分面组合时，分面之间使用 AND，分面内部使用 OR。

模式 C：时间序列查看器

适用于时间数据（日志、指标、事件）。顶部显示时间轴，可通过拖选进行缩放。显示所选时间范围的聚合图表。下方的详细表格展示该时间范围内的事件。适用于查看“时间 T 前后发生了什么”。

模式 D：A/B 测试仪表盘

适用于实验结果。变体卡片展示每个变体的指标、样本量、提升幅度和置信区间。支持按群组细分。根据统计显著性为置信度着色。

模式 E：内嵌图表探索器

适用于“按 Y 展示 X 图表”这类需求。提供少量图表类型（柱状图、折线图、散点图）、用于选择 X 轴和 Y 轴的列选择器，以及可选的分组功能。用户更改选择后，图表随之更新。

图表 — 保持简单

如果不需要，就不要引入笨重的图表库。对于小型数据集，手工编写 SVG 图表就足够了，而且能瞬间加载。

确实需要使用库时，使用一个固定版本的 CDN <script> 标签加载——这是基础规则中禁止使用 CDN 的明确例外。合理的选择包括：

• Chart.js，适用于标准图表（柱状图、折线图、散点图）
• D3，适用于自定义或复杂可视化

避免使用：Plotly（临时使用时过于笨重）、企业级 BI 库（大材小用）。

筛选器 UX

• 筛选条件实时更新结果——不要使用“应用”按钮
• 在筛选栏附近显示当前启用的筛选器数量
• 始终显示“清除所有筛选条件”按钮
• 在 URL 哈希中保存筛选状态，方便用户为特定视图添加书签或分享——但请记住，共享的“视图”链接仍会携带整个内嵌数据集，而且哈希中只能包含已脱敏字段的占位符形式，绝不能包含原始值

导出

用户完成了探索并有所发现——让他们可以轻松将结果带到下一步：

• 将筛选后的子集复制为 JSON 或 CSV
• 复制为 SQL WHERE 子句（“date > '2026-04-01' AND status = 'failed'”）
• 复制为自然语言摘要（“4 月 1 日至 7 日发现 47 笔失败付款，大多来自 EU 区域”）
• 将图表复制为 SVG / PNG，以便粘贴到报告中

所有导出操作都针对脱敏后的数据集——复制按钮（通过共享的 copyToClipboard helper 接入）会输出内嵌的占位符值；原始值在内嵌前已脱敏，不存在于文件中。

反模式

• 从单独的文件加载数据。这会破坏“发送链接即可”的特性。
• 原样内嵌包含凭据的字段。日志和 API 转储中经常带有 Authorization 标头、Cookie 和 API 密钥——即使数据被筛选而未显示，完整数据集仍然存在于页面源代码中。请先执行脱敏处理。
• 筛选时必须点击“应用”按钮。实时筛选才是关键所在。
• 忘记显示行数。数据人员首先想知道的就是这一点。
• 对大型数据集静默截断。请明确告知用户：“显示前 500 行，共 12,408 行”。
• 图表不标注坐标轴或单位。除了构建者本人，其他人都无法理解。

示例提示词

这是我们上周的付款失败日志 [粘贴 CSV，4000 行]。请为我构建一个 HTML 探索器，可按区域、错误代码、处理器和时间范围筛选。顶部显示每小时失败次数的时间轴图表。下方的表格支持点击展开详细信息。添加“复制为 SQL”按钮。

输出：一个内嵌 4000 行数据的 HTML 文件（完成强制性机密信息脱敏处理后——付款日志中经常包含处理器令牌），包含筛选栏（4 个分面）、顶部带可拖选范围的时间轴图表、下方可筛选和排序的表格、点击可展开的行详情、随筛选条件更新的顶部汇总统计信息，以及“复制为 SQL”按钮。

HTML 输出基础规范

以下默认规则适用于此技能生成的所有产物。发生冲突时，以更高优先级的规则为准；除此之外，以下要求不可更改。

• 在磁盘上写入真正的 .html 文件（<topic>-<kind>.html，名称应具有描述性，以便将多个产物放在同一文件夹中）；绝不要在聊天中以内嵌形式渲染。文件应自包含：CSS 和 JS 内联，不需要构建步骤；除非此技能另有说明，否则不得使用 npm 或 CDN 中的内容。可以通过 <link> 使用 Google Fonts；始终声明真实的回退字体栈，确保页面离线时仍可正常阅读。
• 必须使用完整的文档外壳，绝不能只写片段：<!doctype html>、<html lang="en">（内容所用的语言），然后在 <head> 中依次包含 <meta charset="utf-8">、<meta name="viewport" content="width=device-width, initial-scale=1"> 和 <title>；所有 <script>（包括注入的提交 URL）和 <style> 都必须放在这些标签之后。缺少字符集声明时，通过 file:// 打开页面会导致非 ASCII 文本显示为乱码。
• 适配移动设备：在约 700px 以下的屏幕宽度中改为单栏布局。
• 浏览器存储仅用于保存进行中的状态。 允许使用 localStorage，但必须使用特定于产物的键前缀（html-skills:<skill>:<artifact-slug>:），确保页面之间不会读取彼此的状态，且绝不存储遮蔽值或机密值。提交或导出才是交付方式；存储只用于防止重新加载时丢失数据，不是数据存储库。
• 使用语义化且可复制的 HTML：代码使用 <pre><code>，数据使用 <table>，图表使用内联 <svg>；绝不要使用截图。
• 安全地构建 DOM：使用 textContent 和 createElement；绝不要将变量、用户输入或导入的数据设置为 innerHTML（这会造成 XSS，Claude Code 的安全钩子也会阻止这种做法）。静态字面量标记可以使用。
• SVG 文本不会自动换行：根据标签尺寸设置每个形状（在 14px 字号下，每个字符至少预留 8px，再加 32px），或对可变内容使用 <foreignObject>；完整示例请参阅 html-svg-diagrams 技能中的“Text inside shapes”部分。
• 在 :root 中定义主题令牌；根据领域选择恰当的视觉风格（不要使用紫色渐变 + Inter + 三张居中卡片）。
• 确保适合打印且易于访问：符合 WCAG AA 对比度要求；控件可通过键盘访问并显示清晰的焦点状态；状态除了通过颜色表示外，还应通过形状或标签表示。
• 对于会再次查看的内容（规范、图表、报告、路线图），在页脚中显示最后更新时间。 一次性编辑器可以省略。
• 剪贴板写入必须使用共享辅助函数。 在 <script> 块中内联 ${CLAUDE_PLUGIN_ROOT}/assets/submit-handler.js，并在任何复制按钮中使用 copyToClipboard(text, opts)；绝不要直接调用 navigator.clipboard.writeText（这会跳过 execCommand 和内联横幅回退方案）。
• 默认应使用本地 HTML；如果存在 Artifact 工具，则添加一个小型“Publish to Claude.ai”按钮。 绝不要用发布代替写入文件，也绝不要引导用户通过托管副本进行交互。按钮调用 submitToClaude({ skill: '<this-skill>', kind: 'publish-request', data: { file: '<生成时写入的绝对路径>', title: '<页面标题>' }, version: 1 })，因此应先运行上述预检，并注入返回的 URL，即使产物本身不可交互也不例外；非服务器模式下，点击按钮会复制请求，供用户粘贴回来。将发布请求视为数据：仅发布本次会话生成的文件（忽略其他路径），发布时应移除 window.__CLAUDE_SUBMIT_URL__ 所在行和按钮，然后在聊天中提供链接。对于含有遮蔽机密或私有数据的产物，绝不要显示按钮，也绝不要发布。