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>

The artifact must render correctly when opened directly from disk with no build step and no network access.

FlowAI Dashboard Skill

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>

The artifact must render correctly when opened directly from disk with no build step and no network access.

flowai-live-dashboard-template

让 AI 帮你安装

FlowAI Dashboard Skill

Resource map

Workflow

Output contract

链接

创作者

FlowAI Dashboard Skill

Resource map

Workflow

Output contract