diff --git a/apps/web/src/i18n/content.fr.ts b/apps/web/src/i18n/content.fr.ts index df6705ed3..9bff95f06 100644 --- a/apps/web/src/i18n/content.fr.ts +++ b/apps/web/src/i18n/content.fr.ts @@ -313,6 +313,7 @@ export const FR_DESIGN_SYSTEM_CATEGORIES: Record = { }; export const FR_SKILL_IDS_WITH_EN_FALLBACK = [ + 'flowai-live-dashboard-template', 'html-ppt-taste-brutalist', 'html-ppt-taste-editorial', 'live-dashboard', diff --git a/apps/web/src/i18n/content.ru.ts b/apps/web/src/i18n/content.ru.ts index 739779d96..3927c64e7 100644 --- a/apps/web/src/i18n/content.ru.ts +++ b/apps/web/src/i18n/content.ru.ts @@ -313,6 +313,7 @@ export const RU_DESIGN_SYSTEM_CATEGORIES: Record = { }; export const RU_SKILL_IDS_WITH_EN_FALLBACK = [ + 'flowai-live-dashboard-template', 'html-ppt-taste-brutalist', 'html-ppt-taste-editorial', 'live-dashboard', diff --git a/apps/web/src/i18n/content.ts b/apps/web/src/i18n/content.ts index 367c90e28..fd0d92fec 100644 --- a/apps/web/src/i18n/content.ts +++ b/apps/web/src/i18n/content.ts @@ -362,6 +362,7 @@ const DE_DESIGN_SYSTEM_CATEGORIES: Record = { }; const DE_SKILL_IDS_WITH_EN_FALLBACK = [ + 'flowai-live-dashboard-template', 'html-ppt-taste-brutalist', 'html-ppt-taste-editorial', 'live-dashboard', diff --git a/docs/screenshots/skills/flowai-live-dashboard-template.png b/docs/screenshots/skills/flowai-live-dashboard-template.png new file mode 100644 index 000000000..ed1f23c08 Binary files /dev/null and b/docs/screenshots/skills/flowai-live-dashboard-template.png differ diff --git a/skills/flowai-live-dashboard-template/SKILL.md b/skills/flowai-live-dashboard-template/SKILL.md new file mode 100644 index 000000000..1efa2c3c3 --- /dev/null +++ b/skills/flowai-live-dashboard-template/SKILL.md @@ -0,0 +1,87 @@ +--- +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 + + +... + +``` + +The artifact must render correctly when opened directly from disk with no +build step and no network access. diff --git a/skills/flowai-live-dashboard-template/assets/template.html b/skills/flowai-live-dashboard-template/assets/template.html new file mode 100644 index 000000000..b7fb6aa70 --- /dev/null +++ b/skills/flowai-live-dashboard-template/assets/template.html @@ -0,0 +1,387 @@ + + + + + + FlowAI Team Dashboard Template + + + +
+
+ FlowAI · Team Dashboard +
+ + +
+
+
+
+ + + +
+ +
+
Total Members
35
+
Active Now
15
+
Runs Today
4,210
+
Success Rate
98.6%
+
+ +
+
+
+
+ + + + + + + + + +
NameRoleStatusWorkflow
Alexander MontgomeryEditorActive33%
Nathaniel RichardsonOwnerActive24%
Theodore WhitmoreEditorPending--
+
+
+
+
Online Presence
+ +
+
+
+ +
+
+
+
Role Distribution
+ +
+
+
Top Contributors
+
+
WPWilliam Prescott
28
+
EKEdward Kensington
24
+
OROliver Remington
19
+
+
+
+
+ +
+
+
+
Activity Trend
+ +
+
+
Risk Radar
+
+
5 Failed Logins
+
API key Age Exceeded Policy
+
SSO Scope Changed
+
+
+
+
+
+
+
+ + + diff --git a/skills/flowai-live-dashboard-template/example.html b/skills/flowai-live-dashboard-template/example.html new file mode 100644 index 000000000..af16c1e2c --- /dev/null +++ b/skills/flowai-live-dashboard-template/example.html @@ -0,0 +1,13 @@ + + + + + + FlowAI Team Dashboard Example + + + + + + + diff --git a/skills/flowai-live-dashboard-template/references/checklist.md b/skills/flowai-live-dashboard-template/references/checklist.md new file mode 100644 index 000000000..4a5b8da8a --- /dev/null +++ b/skills/flowai-live-dashboard-template/references/checklist.md @@ -0,0 +1,35 @@ +# Checklist + +## P0 + +- `assets/template.html` exists and opens directly from disk in a browser. +- `example.html` is a complete, hand-built sample with real labels, names, and values. +- Skill frontmatter is `od.mode: prototype`, `od.scenario: operations`, + `od.preview.type: html`, `od.design_system.requires: true`. +- All three tabs (`Team Members`, `Team Details`, `Activity Log`) switch + correctly; only one view is visible at a time. +- Role bar chart animates with easing on first reveal of the details tab. +- Chart hover tooltips show precise label and value. +- Panels/cards zoom in/out via click; clicking the backdrop or pressing + Esc restores the layout. +- Dark mode toggle works and chart strokes/labels remain legible (chart + colors are re-derived from CSS variables on toggle, not baked in). +- No external avatar / photo CDN dependencies; avatars are inline SVG or + initial badges. + +## P1 + +- "Export CSV" exports every row currently rendered in the team table, + including the `Workflow` column (driven by the table DOM, not a hardcoded + fixture). +- Layout collapses gracefully on narrow viewports: under 1300px the main + grid stacks to a single column and stat cards fall back to two columns; + under 720px stat cards stack to one column and tabs wrap. +- Colors and spacing inherit from root tokens / CSS variables; no + hardcoded hex values inside chart drawing code. + +## P2 + +- Tooltip avoids viewport edge clipping. +- Chart values animate smoothly on re-render after a theme switch. +- Tab state is reflected in the URL hash and survives a refresh.