HTML 可视化报告生成器

本 skill 用于生成一种特定风格的 HTML 报告：

暗色科技风（GitHub Dark / Linear / Vercel 风格混合）
大量 SVG 原生绘制图表（不依赖任何外部 JS 库）
信息密度高、模块化卡片布局
单文件 HTML，自包含所有 CSS / SVG，可直接在浏览器打开

触发场景

当用户请求满足以下任一情况时，使用本 skill：

显式触发：消息以 /html-report 开头
隐式触发：
- 「生成 HTML 报告」「做一份可视化报告」「写一份分析报告」
- 「分析 XXX 仓库 / 模块 / 系统 / 链路 / 架构」+ 暗色 / 可视化 / 图表等关键词
- 用户提及「保持之前那种暗色风格」「加图表」「信息集中」

核心约束（不可妥协）

| 维度 | 要求 | |---|---| | 主题 | 必须暗色调，禁止白底 | | 图表 | 必须用原生 SVG 手写，禁止 ECharts / Chart.js / mermaid 等运行时库 | | 文件 | 单文件 HTML，CSS 内联在 <style> 中 | | 字体 | 系统字体栈 + 等宽字体（代码 / 数字） | | 输出 | 在对话中以 ```html 代码块返回完整文档；文件较大时用 write_to_file 写入工作区 | | 长度 | 报告主体一般 ≥ 6 个章节，≥ 4 张 SVG 图表 |

工作流程（必须按顺序执行）

Step 1 — 信息收集

根据用户分析对象，调用工具收集事实：

代码仓库：list_dir 看结构 → read_file / codebase_search / search_content 获取关键文件（package.json、入口、路由、service、store、配置）
文档调研：web_fetch / web_search
优先使用并行工具调用 提升效率
复杂仓库优先派发 code-explorer subagent

Step 2 — 信息结构化

把收集的内容拆解为以下维度（按需选用）：

架构层级：分层、模块边界、依赖方向
链路 / 流程：用户操作 → 前端 → 后端 → DB / 三方
功能矩阵：模块 × 能力 × 状态
数据流 / 状态机：核心状态流转
依赖关系：包之间 / 模块之间的引用网络
指标统计：行数、文件数、API 数量、覆盖率等

Step 3 — 选择图表类型

参考 references/diagram-patterns.md，从下列 9 种 SVG 模式中至少选择 4 种：

架构分层图（横向 / 纵向多层卡片 + 连接线）
依赖关系图（force-like 节点连线）
状态机图（圆形节点 + 有向箭头）
时序流程图（泳道 + 步骤箭头）
树形路由图（递归层级展开）
矩阵热力图（grid + 渐变填充）
环形 / 半环形统计图（donut / radial）
流程泳道图（多角色横向并行）
API 映射图（左右两栏 + 跨栏连线）

Step 4 — 应用样式规范

严格按 references/style-guide.md 的 CSS 变量、间距、字号、配色生成样式，确保多次调用风格一致。

Step 5 — 填充模板

使用 assets/template.html 作为骨架，注入：

<title> 与顶部 hero 区
章节卡片（带图标 / 标签 / 数字徽章）
SVG 图表
代码 / 数据片段（用等宽字体 + 语法高亮色）
底部 footer（生成时间 / 数据来源）

Step 6 — 输出与交付

优先：使用 write_to_file 写到工作区（如 report-<topic>-<date>.html），告知用户路径
次选：在对话中输出 ```html 代码块
不要：调用 preview_url 传 data URI（不支持）
主动询问用户是否需要调整章节 / 增加维度 / 导出 PDF

何时阅读参考文件

每次执行任务都必须先读 references/style-guide.md
决定图表类型时必须读 references/diagram-patterns.md
填充模板时必须读 assets/template.html

反模式（禁止做）

❌ 使用浅色背景或导出现代 Material 风格
❌ 引入 CDN 上的 JS 图表库
❌ 用 emoji 代替图标（顶部 hero 标识除外）
❌ 报告只有文字、没有 SVG 图
❌ 输出超过 3000 行却不写文件、直接灌进对话
❌ 编造未经验证的数据 / 接口 / 模块