Flowai live dashboard template

Skill nexu-io/open-design/design-templates/flowai-live-dashboard-template

🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.

Install

npx -y skills add nexu-io/open-design --skill flowai-live-dashboard-template

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

3.5 KB, as published. Nobody here has run it

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

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 B placeholders.
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
Run through references/checklist.md before 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>