flowai-live-dashboard-template
|
pinned to #fb9ae97updated 3 weeks ago
Ask your AI client: “install skills/flowai-live-dashboard-template”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/flowai-live-dashboard-templatemetahub onboarded this repo on the author's behalf.
If you own github.com/nexu-io/open-design on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
77,072
Last commit
3 weeks ago
Latest release
published
- #agent-skills
- #ai-agents
- #ai-design
- #byok
- #claude-code-for-design
- #claude-design
- #codex-design
- #coding-agents
- #cursor-design
- #design-systems
- #design-tools
- #desktop-app
- #figma-alternative
- #generative-ai
- #hermes-agent
- #local-first
- #no-code
- #prototyping
- #ui-generator
- #vibe-coding
About this skill
Pulled from SKILL.md at publish time.
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.
Evaluation report
WarningsAutomated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· 3 weeks ago
Documentation
41Description qualitywarn
49 words · 305 chars — manifest description is empty; graded the GitHub repo description instead
A skill's manifest description doubles as its trigger — add one to SKILL.md (15+ words, e.g. “use this skill when …”).
README is present and substantial
54,272 chars · 20 sections · 10 code blocks
Tags / topics declared
20 total — agent-skills, ai-agents, ai-design, byok, claude-code-for-design, claude-design (+14)
README has usage / example sections
found: Quick start
Homepage / docs URL declared
https://open-design.ai
Release history
1- releasecurrentfb9ae97warn3 weeks ago
Contents
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 Bplaceholders. - 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
Workflowcolumn
- tab switching with hash sync (
- Run through
references/checklist.mdbefore 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.
Reviews
No reviews yet. Be the first.
Related
Planning With Files
Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.
Browser Use
🌐 Make websites accessible for AI agents. Automate tasks online with ease.
Frontend Slides
Create beautiful slides on the web using Claude's frontend skills
mh install skills/flowai-live-dashboard-template