--- name: FlowAI Dashboard slug: flowai-dashboard category: Frontend description: FlowAI Dashboard generates a self-contained team management dashboard with three tabs, KPI cards, charts, and CSV export. Use it for workspace admin briefs that need an interactive FlowAI-style layout. github: "https://github.com/nexu-io/open-design/tree/main/design-templates/flowai-live-dashboard-template" language: TypeScript stars: 85410 forks: 10012 install: "npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/flowai-live-dashboard-template ~/.claude/skills/flowai-live-dashboard-template" installs_to: ~/.claude/skills/flowai-live-dashboard-template source_path: design-templates/flowai-live-dashboard-template/SKILL.md collection_size: 25 category_size: 567 collection_url: "https://dirskills.com/collections/nexu-io/open-design" added: 2026-08-13T07:36:09.288Z last_synced: 2026-08-13T07:36:09.288Z canonical_url: "https://dirskills.com/skills/flowai-dashboard" --- # FlowAI Dashboard FlowAI Dashboard generates a self-contained team management dashboard with three tabs, KPI cards, charts, and CSV export. Use it for workspace admin briefs that need an interactive FlowAI-style layout. **Install:** ```bash npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/flowai-live-dashboard-template ~/.claude/skills/flowai-live-dashboard-template ``` ## README # FlowAI Dashboard Skill Produce a single-screen, multi-tab team management dashboard inspired by the FlowAI aesthetic. The output is a self-contained HTML file (no external runtime dependencies) with built-in interactions: tab switching, an animated bar chart, hover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV export of the visible team table. ## Resource map ``` 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) ``` ## Workflow 1. **Read the active DESIGN.md** (injected above). Map color, typography, spacing, and component styling tokens to the CSS variables used by `assets/template.html`. Do not invent new tokens. 2. Start from `assets/template.html`; never generate the shell from blank. 3. Keep three tabs: `Team Members`, `Team Details`, `Activity Log`. Tabs must actually switch and only one view is visible at a time. 4. Generate plausible, specific sample data (real-looking names, IDs, roles, departments, dates, percentages). No `Member A / Metric B` placeholders. 5. Required interactions: - tab switching with hash sync (`#members | #details | #activity`) - role bar chart animates with easing on first reveal of the details tab - chart hover tooltips with precise label + value - click any panel/card to zoom; click again or press Esc to restore - dark mode toggle that re-derives chart colors from CSS variables - "Export CSV" button that exports every row currently in the team table, including the `Workflow` column 6. Run through `references/checklist.md` before final output. ## Output contract Emit one short orientation sentence, then the artifact: ```xml ... ``` The artifact must render correctly when opened directly from disk with no build step and no network access.