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 行却不写文件、直接灌进对话
- ❌ 编造未经验证的数据 / 接口 / 模块
