Menu
生成单文件 HTML 数据看板。触发：用户要把数据/分析结果做成网页、dashboard、可视化报告、management demo。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | data-dashboard |
| description | 生成单文件 HTML 数据看板。触发：用户要把数据/分析结果做成网页、dashboard、可视化报告、management demo。 |
| keywords | ["dashboard","数据看板","看板","仪表盘","demo","可视化报告","html报告","management demo","数据可视化"] |
满足任一即走本规范：
.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 组织 |
📦 完整可运行骨架见
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": "经营"}
]
}
每个子 Agent 只写一个 fragment，字段如下：
{
"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
合并后父 Agent 负责唯一的最终检查：确认所有 contract 页面都存在、浏览器打开无 JS 错误、375/768/1440px 三档不裂、切页和 resize 后图表正常。若子 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景观施工图预审专家级 Skill「总工之眼」v3.1。基于李博总工 20 年实战经验，集成中国规范 1500+ 条、12 条经总工终审与五专业外部工程师复核的经验法则库、三级签字判断逻辑。**任何涉及景观图纸审查、施工图预审、图纸会审、规范核查、绿地率/无障碍/坡度/植物配置/海绵设施/雨水花园/景观照明/亭廊架/无障碍流线/竖向标高/铺装做法的场景，都应使用本技能。** 触发关键词包括：图纸审查、施工图审、方案审查、总工审图、签字建议、规范核查、绿地率、无障碍、坡度、种植间距、覆土深度、海绵城市、雨水花园、景观照明、亭廊架基础、跨专业会签、北方公园、冬季结冰、地下室顶板大乔木、设计院预审、设计院总工、景观合规、施工图错漏、漏审、暂缓签字、不可签字、整改通知、审图档案、landscape review、施工图、构筑物、给排水、铺装。即使用户没有明确说"审查"，只要提到景观图纸、施工图、规范、签字、整改等场景，也应该使用本技能。
Create, inspect, edit, validate, render, and QA presentation decks. Use when the user mentions PowerPoint, PPT, PPTX, HTML deck, slide deck, presentation, template slides, speaker notes, slide images, or asks to read, generate, create, make, design, or modify a presentation artifact. New decks default to controlled, editable HTML delivery; PPTX is an explicit optional export.
HyperFrames MP4/GIF videos; motion graphics; explainer clips; 视频、短片、动图、动画成片。
Evidence-first research synthesis workflow for market research, industry analysis, competitive research, policy or company information synthesis, file-only or file-augmented analysis, technical architecture reviews, risk assessment, and report-ready conclusions. Use when the user asks for comprehensive, cross-verified research or deep summarization rather than a simple lookup.
Toolkit for styling non-deck artifacts with one of 10 legacy color/font themes. PPT, PPTX, slide, and deck theme discovery is owned by the pptx skill and must be redirected there.
Guides the agent to proactively save user information to long-term memory and search context when needed. Load this skill to understand when and how to use memory_write, memory_read, and memory_search.