flowai-live-dashboard-template

FlowAI 仪表板技能

制作一个单屏、多标签页的团队管理仪表板，设计灵感来自 FlowAI 美学。输出为自包含的 HTML 文件（无外部运行时依赖），并内置以下交互：切换标签页、带动画的柱状图、图表悬停提示、点击面板缩放、深色模式切换，以及导出可见团队表格为 CSV。

资源映射

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # reference seed used as the starting structure
├── references/
│   └── checklist.md           # P0/P1/P2 quality gates
└── example.html               # complete hand-built sample (gallery preview)

工作流

1. 阅读当前生效的 DESIGN.md（已在上方注入）。将颜色、字体、间距和组件样式令牌映射到 assets/template.html 使用的 CSS 变量。不要自行发明新令牌。
2. 从 assets/template.html 开始；绝不要从空白处生成外壳。
3. 保留三个标签页：Team Members、Team Details、Activity Log。标签页必须能正常切换，并且一次只能显示一个视图。
4. 生成合理、具体的示例数据（看起来真实的姓名、ID、角色、部门、日期、百分比）。不要使用 Member A / Metric B 这类占位内容。
5. 必需的交互：
   • 切换标签页并同步哈希（#members | #details | #activity）
   • 首次显示详细信息标签页时，角色柱状图以缓动效果播放动画
   • 图表悬停提示显示精确的标签和数值
   • 点击任意面板/卡片即可放大；再次点击或按 Esc 恢复
   • 深色模式切换；图表颜色需根据 CSS 变量重新推导
   • “Export CSV”按钮导出团队表格中当前显示的所有行，包括 Workflow 列
6. 最终输出前，按 references/checklist.md 检查。

输出约定

先输出一句简短的说明，然后输出产物：

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

直接从磁盘打开时，产物必须能正确渲染，无需构建步骤或网络连接。