FlowAI Dashboard Skill
SkillFiles & storageLets your agent build a single-file team dashboard page with member tables, KPI stats, charts and activity logs.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the FlowAI Dashboard Skill skill
About this capability
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark th
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/flowai-live-dashboard-template/SKILL.md and read by ahel’s review.
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
- 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. - Start from
assets/template.html; never generate the shell from blank. - Keep three tabs:
Team Members,Team Details,Activity Log. Tabs must actually switch and only one view is visible at a time. - Generate plausible, specific sample data (real-looking names, IDs, roles,
departments, dates, percentages). No
Member A / Metric Bplaceholders. - 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
Workflowcolumn
- tab switching with hash sync (
- Run through
references/checklist.mdbefore final output.
Output contract
Emit one short orientation sentence, then the artifact:
<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>
The artifact must render correctly when opened directly from disk with no build step and no network access.
Signals
- GitHub stars
- 95k
- Forks
- 11k
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
flowai-live-dashboard-template- Source
- github.com/nexu-io/open-design