---
name: "html-report"
description: "封装 HTML 自包含报告的生成能力：设计系统 CSS、组件库（指标卡/表格/Callout/情景卡/价位地图）、ECharts 图表样板、字体与脚本资源、一键脚手架。当用户要求生成 HTML 报告、持仓诊断报告、研究文档交付物时调用此技能。区别于 .agents/skills/ 下的股票分析内容技能——本技能只管'怎么把分析结果做成报告'，不产出分析内容本身。"
---

# HTML 报告生成 Skill（业务技能）

## 定位

`.agents/business/` 存放**业务/交付类**技能——与 `.agents/skills/` 的区别：

| 目录 | 内容 | 例子 |
|---|---|---|
| `.agents/skills/` | 股票**分析内容**方法论 | stock-deep-analysis、fund-comparison |
| `.agents/business/` | **交付/生产**能力封装 | html-report（本技能） |

分析 skill 负责"说什么"，业务 skill 负责"怎么交付"。生成报告时两者配合：先调用分析 skill 得到内容，再用本技能渲染成交付物。

## 目录结构

```
html-report/
├── SKILL.md              ← 本文件
├── template/             ← 可直接复制的报告骨架
│   ├── index.html        ← 设计系统 CSS + 组件库 + 页面骨架
│   ├── assets/charts.js  ← 4 类常用图表的 ECharts 样板
│   └── _shared/
│       ├── fonts/        ← 5 个 ttf（PlexSerif/InsSans/PlexMono）
│       └── js/echarts.min.js
└── scripts/new-report.sh ← 一键脚手架
```

## 快速开始

```bash
bash .agents/business/html-report/scripts/new-report.sh <report-slug> reports
```

生成 `reports/<report-slug>/`，其中 `<slug>.html` 即主文件。**单文件夹整体发给接收者即可离线打开**（全部相对路径、无外网依赖）。

## 设计系统（template/index.html 内已配好）

- **配色令牌**（唯一来源，图表 JS 从 CSS 变量读取，禁止硬编码色值）：
  `--bg #faf8f5` / `--bg2 #f1ece4` / `--ink #1b2534` / `--muted #64707f` / `--rule #ddd4c6` / `--accent #1f4e79（蓝）` / `--accent2 #b4552d（赭红=警示/亏损）`
- **字体**：标题 PlexSerif（衬线）+ 正文 InsSans + 数据 PlexMono（数字/代码一律用它）
- **版式**：980px 居中单栏、封面 + 章节流、印刷/移动端已适配

## 组件库（直接复制 HTML 块即可用）

| 组件 | 类名 | 用途 |
|---|---|---|
| 封面 | `.cover` | kicker 小标签 + 标题 + 副标题 + 元信息行 |
| 指标卡组 | `.diag-card > .metrics > .metric` | 4 列关键数字，`.num.bad/.good` 红蓝语义 |
| 表格 | `.table-wrap > table` | 自动滚动容器，斑马纹，`.num/.neg/.pos` |
| Callout | `.callout`（`.blue`） | 结论/警示框，默认赭红、blue 为信息 |
| 图表 | `.chart-figure > figcaption + .chart-box` | ECharts 容器，必须带标题 |
| 情景卡 | `.scenario > .sc.hold/.add/.trim` | 三情景决策卡，头色区分 |
| 价位地图 | `.price-map > .pm-row.cost/.press/.sup` | 成本/压力/支撑分层 |
| 强调 | `<mark class="key">` / `<strong>` | 重点句高亮（全文统一用一种） |
| 来源引用 | `sup a → footer .sources ol` | 上标锚点跳转到页脚编号 |

## 图表规则（assets/charts.js 已内置 4 个样板）

1. **模板自带 4 类图**：分组柱状图、横向条形图、折线/面积图、K 线+参考线——复制 chart 块、改数据和容器 id 即可
2. **颜色**只从 CSS 变量读（脚本顶部已写好 `getComputedStyle` 取值）
3. **每个图表必须有 `<figcaption>` 标题**
4. `animation: false`，每个实例注册 `window.resize`
5. 引用方式固定：
   ```html
   <script src="./_shared/js/echarts.min.js"></script>
   <script src="assets/charts.js"></script>
   ```

## 工作流

1. `new-report.sh` 生成骨架
2. 填充内容（来自分析 skill 的结论/数据/表格）
3. 需要的图表：从 `template/assets/charts.js` 复制对应样板，改数据
4. 页脚 Sources 补引用（`id="cite-N"` 与正文 `sup a` 一一对应）+ 免责声明
5. 本地起服务验证渲染（`python3 -m http.server` + 浏览器检查图表与控制台）
6. **交付前必须调用 `report-review` 技能做多维度审查**（数据核验/口径核验/图表一致性等七维度），审查通过并汇报后才算交付完成

## 约定

- 所有 HTML 首行保留 `<!-- Generated by Trae Work -->`
- 禁止绝对路径、外网 CDN、base64 内联大图——保证离线可打开
- 报告语言跟随用户语言
- 投资类报告免责声明必含：不构成投资建议、市场有风险、以官方披露为准