data-dashboard生成单文件 HTML 数据看板。触发：用户要把数据/分析结果做成网页、dashboard、可视化报告、management demo。
Independent GitHub snapshot · Automated classification · Original documentation governs
满足任一即走本规范：
.html 形式交付。matplotlib / pandas.plot 出 PNG，禁止 pandas.DataFrame.to_html() 原样输出（识别特征：class="dataframe"）。| 用途 | 选型 |
|---|---|
| 图表 | ECharts 5.5+ via cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js |
| 框架 | 无，vanilla JS |
| 字体 | 系统栈优先：-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif |
| 图标 | inline SVG 或 Unicode；不引图标字体库 |
| 数据 | 全量 inline const D = {...}，按页 key 组织 |
write_file 有序分块：首块 chunk_index=0, final=false，后续递增索引，
最后一块 final=true；每个生成块建议不超过 5,500 字符。execute_code 只用于数据计算、短小的文件修正和交付校验；禁止把整份 HTML、
CSS、JS 或模板正文放进 execute_code。同样禁止用 bash heredoc、base64 或超长
命令写页面正文。bash 可以执行短小的目录准备、合并脚本和校验命令，但页面正文必须来自分块文件
写入，或来自已经落盘的 fragments / template 文件。📦 完整可运行骨架见
assets/template.html——200 行左右的脚手架，已包含 ECharts CDN、主题注册占位、路由懒渲染、fmt/ui工具完整版、D = {}/renderers = {}空对象。新任务复制该模板，填数据 + 写 renderer 即可。
┌─ <head> meta + 主题 CSS 变量 + ECharts CDN
├─ <body>
│ ├─ .sidebar 侧边栏导航（多页时）
│ ├─ .main
│ │ ├─ .page#page-P1.active 首屏：洞察总结
│ │ ├─ .page#page-P2 ...
│ │ └─ .page#page-PN
│ └─ .footnote 数据口径 / 模拟数据声明
└─ <script>
const D = { P1:{...}, P2:{...} }; // 数据
const theme = {...}; // ECharts 全局主题
const fmt = {...}; // 格式化工具
const ui = { mkKPI, mkTable, mkFunnel };// 通用 DOM 组件
const renderers = { P1:()=>{}, ... }; // 每页渲染器
showPage('P1'); // 路由 + 懒渲染
关键模式：
charts[id] = echarts.init(dom)，在 window.resize 时统一 charts[id].resize()。D[id]，只写 #page-{id} 子树，不互相依赖。默认仍由一个 Agent 生成小看板。只有同时满足以下条件时，才使用子 Agent 并行分片：
P1、P2 等页面 ID 隔离；不要把多个子 Agent 指向同一个 dashboard.html。父 Agent 先串行确定页面、数据口径、主题 token、导航和共享交互；再让 2–3 个子 Agent 并行写各自独占的 drafts/P*.json。每个委派必须设置 read_only: false 和仅包含该 fragment 的 write_scope。父 Agent 不得把 fragment 正文读回后用模型拼接，而应运行 scripts/merge_dashboard_fragments.js 生成唯一的最终 HTML。
父 Agent 先写 drafts/dashboard-contract.json：
{
"title": "经营总览",
"brand": "Northstar",
"initialPage": "P1",
"note": "数据截至 2026-07-14",
"pages": [
{"id": "P1", "label": "总览", "group": "概览"},
{"id": "P2", "label": "趋势", "group": "经营"}
]
}
每页只写一个 fragment，各子 Agent 独占其分配的文件，字段如下：
{
"pageId": "P1",
"data": {"kpis": [], "trend": []},
"html": "<section class=\"page\" id=\"page-P1\">...</section>",
"renderer": "() => { const d = D.P1; /* only render #page-P1 */ }",
"css": "#page-P1 .local-panel { display: grid; }"
}
硬约束：pageId 必须在 contract 中且每页恰好一个 fragment；HTML 只能是一段对应 #page-Pn 的 .page，不得含 document-level 标签或 <script>；内部 id 必须以 Pn- 开头；renderer 只能是函数表达式，不得声明 D、renderers 或共享状态；局部 CSS 必须以 #page-Pn 开头，不能修改 body、:root、导航或主布局。页面排序永远以 contract 为准，不以文件传入顺序为准。
合并命令（先解析当前 skill 目录；不要假定当前工作目录）：
DATA_DASHBOARD_SKILL_DIR="${BOX_AGENT_DATA_DASHBOARD_SKILL_DIR:-${DATA_DASHBOARD_SKILL_DIR:-{skill_dir}}}"
${BOX_AGENT_NODE:-node} "$DATA_DASHBOARD_SKILL_DIR/scripts/merge_dashboard_fragments.js" \
--template "$DATA_DASHBOARD_SKILL_DIR/assets/template.html" \
--contract drafts/dashboard-contract.json \
--out dashboard.html \
drafts/P1.json drafts/P2.json drafts/P3.json
合并器在写入最终 HTML 前检查每个 renderer 和合并后内联脚本的 JS 语法；失败时按报错文件修正，不要跳过检查或覆盖已有可用交付物。
合并后父 Agent 先核对内容验收与数据一致性，再做唯一的浏览器验收：所有 contract 页面存在、无 JS 错误、375/768/1440px 三档不裂、切页和 resize 后图表正常。图表还须核对任务条/数据点数量及关键标注，不能仅凭无 JS 错误判定通过。若子 Agent 失败，仅重试对应 fragment；不要重做已通过的页面。
核心功能通过后停止扩页与改风格；字体、留白、标签位置等非阻塞视觉微调最多两轮，仍有不足就保留可用产物并说明限制。语法错误、用户要求的图表不显示、内容缺失或数据不一致必须修复或明确报告缺口，不能按视觉微调跳过。
echarts.registerTheme('app', themeObj)，所有 echarts.init(dom, 'app')。主题统一了背景、坐标轴、tooltip、palette。title.text（图名）、tooltip（hover 详情）、grid 留白（top/bottom/left/right ≥ 40）。series.type='funnel'；如果想要"宽度按值缩放 + 步骤转化率标注"的横向漏斗，可以用 series.type='bar' + yAxis.type='category' + 自定义 label。height: 320px（KPI 行）/ 420px（主图）。不要用 height: auto 否则 ECharts 报 0 size 警告。// 数字
const fmt = {
num: n => n.toLocaleString('zh-CN'),
pct: (n, d=1) => (n*100).toFixed(d)+'%',
money: (n, cur='¥') => cur + n.toLocaleString('zh-CN'),
short: n => n>=1e8 ? (n/1e8).toFixed(1)+'亿'
: n>=1e4 ? (n/1e4).toFixed(1)+'万'
: n.toLocaleString('zh-CN'),
sec: s => `${Math.floor(s/60)}分${s%60}秒`,
};
// DOM 组件
const ui = {
kpi: (label, value, delta) => `<div class="kpi">...</div>`,
table: (headers, rows) => `<table class="t">...</table>`,
insight: (title, items) => `<div class="insight">...</div>`,
};
⚠️ 设计规范在
references/design-spec.md中维护。开始渲染前必须完整读取它，并把里面的 token 翻译为:root { --token: value }CSS 变量与组件样式；ECharts palette 注册为主题 color 字段。全文件只用变量，不写硬编码色值。 如果 design-spec.md 已填写某条目，完全以它为准，不要叠加下方兜底规则——避免与设计语言冲突（例如 spec 明确"不用阴影"时，兜底里的"软阴影"必须丢弃）。
兜底规则（仅当 design-spec.md 对应段落为空白时启用）：
#xxx 硬编码。repeat(auto-fill, minmax(200px, 1fr))。font-variant-numeric: tabular-nums，表格数字列右对齐。to_html() 直接拼字符串28500000 而非 2,850 万 / ¥28.5M）window.resize