flowai-live-dashboard-template

1# FlowAI Dashboard Skill
2 
3Produce a single-screen, multi-tab team management dashboard inspired by the
4FlowAI aesthetic. The output is a self-contained HTML file (no external runtime
5dependencies) with built-in interactions: tab switching, an animated bar chart,
6hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV
7export of the visible team table.
8 
9## Resource map
10 
11```
12flowai-live-dashboard-template/
13├── SKILL.md
14├── assets/
15│   └── template.html          # reference seed used as the starting structure
16├── references/
17│   └── checklist.md           # P0/P1/P2 quality gates
18└── example.html               # complete hand-built sample (gallery preview)
19```
20 
21## Workflow
22 
231. **Read the active DESIGN.md** (injected above). Map color, typography,
24   spacing, and component styling tokens to the CSS variables used by
25   `assets/template.html`. Do not invent new tokens.
262. Start from `assets/template.html`; never generate the shell from blank.
273. Keep three tabs: `Team Members`, `Team Details`, `Activity Log`. Tabs must
28   actually switch and only one view is visible at a time.
294. Generate plausible, specific sample data (real-looking names, IDs, roles,
30   departments, dates, percentages). No `Member A / Metric B` placeholders.
315. Required interactions:
32   - tab switching with hash sync (`#members | #details | #activity`)
33   - role bar chart animates with easing on first reveal of the details tab
34   - chart hover tooltips with precise label + value
35…