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.
Quellinformationen
- Repository
- nexu-io/open-design
- Letzte Quellaktivität
- 18. August 2026 um 07:09
- Erkannte Sprache von SKILL.md
- Englisch
- Sterne
- 101.372
- Forks
- 11.662
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Datei-Explorer
5 DateienSKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- flowai-live-dashboard-template
- description
- 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.
- triggers
- ["flowai dashboard","team dashboard","team management dashboard","interactive admin dashboard","workspace admin dashboard","团队管理后台","可交互后台"]
- od
- {"mode":"prototype","platform":"desktop","scenario":"operations","preview":{"type":"html","entry":"index.html","reload":"debounce-100"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["state-coverage","accessibility-baseline"]},"example_prompt":"Create a FlowAI-style team management dashboard with Team Members, Team Details and Activity Log tabs, KPI cards, a member table with status badges, a role-distribution bar chart, an online-presence sparkline, top contributors, light/dark mode, and CSV export."}
# 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
<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.
Auf GitHub ansehen