HTML 可视化报告

要解决什么问题

数据分析或架构梳理的结论，往往停在 Markdown 或表格里：发给别人要装环境、截图会丢交互，浅色 PPT 式页面又和工程师日常看的 GitHub Dark、Linear 一类界面格格不入。若还要「加几张图」，很容易滑向 ECharts、Chart.js 或 mermaid——多一个运行时依赖、CDN 或打包步骤，单文件也不好直接丢进邮件或内网 Wiki。

技能如何工作

本技能面向固定视觉规范的 HTML 报告：暗色科技风、卡片化模块、系统字体栈与等宽数字，禁止白底。图表一律用原生 SVG 手写，不引入外部 JS 图表库；样式内联在 <style> 中，产出单文件 HTML，浏览器双击即可打开。

执行时会按 SKILL 约定先读 references/style-guide.md、选型时读 references/diagram-patterns.md、套版时读 assets/template.html，保证版式与图示风格一致。触发方式包括显式 /html-report，或自然语言如「生成 HTML 报告」「分析某仓库/链路」并带暗色、可视化、图表等意图。结果在对话中以 html 代码块交付，而不是用 preview/data URI。

边界与注意点

• 适合：需要高信息密度、暗色、可离线打开的分析/架构/模块说明页。
• 不适合：要交互式 BI、实时数据大屏，或必须用某套现成图表库的团队规范。
• 约束：不得编造未验证的数据与接口；报告不能只有文字而无 SVG 图；体量很大时应写文件而非在对话里灌数千行。
• 完成后可按需询问是否调整章节、增加维度或导出 PDF，但 PDF 并非默认流水线。