flowai-live-dashboard-template
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 theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.
Profile →npx skills add nexu-io/open-design --skill flowai-live-dashboard-template --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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` placehold
- Resource map
- Workflow
- Output contract
What does the flowai-live-dashboard-template skill do?
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 theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a team / workspace admin dashboard, an interactive admin dashboard with charts, or names FlowAI.
How do I install it?
Run `npx skills add nexu-io/open-design --skill flowai-live-dashboard-template --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.