{"id":"1725509f-cc7d-4a0a-bc1a-e693b76f2a33","shortId":"PJX2Bg","kind":"skill","title":"flowai-live-dashboard-template","tagline":"Team-management dashboard skill in the FlowAI aesthetic — three tabs\n(Team Members, Team Details, Activity Log), KPI stat row, member table,\nrole distribution bar chart, online presence and activity sparklines,\nand a top-contributors panel, all in a single self-contained HTML fil","description":"# FlowAI Dashboard Skill\n\nProduce a single-screen, multi-tab team management dashboard inspired by the\nFlowAI aesthetic. The output is a self-contained HTML file (no external runtime\ndependencies) with built-in interactions: tab switching, an animated bar chart,\nhover tooltips on charts, click-to-zoom panels, dark mode toggle, and CSV\nexport of the visible team table.\n\n## Resource map\n\n```\nflowai-live-dashboard-template/\n├── SKILL.md\n├── assets/\n│ └── template.html # reference seed used as the starting structure\n├── references/\n│ └── checklist.md # P0/P1/P2 quality gates\n└── example.html # complete hand-built sample (gallery preview)\n```\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). Map color, typography,\n spacing, and component styling tokens to the CSS variables used by\n `assets/template.html`. Do not invent new tokens.\n2. Start from `assets/template.html`; never generate the shell from blank.\n3. Keep three tabs: `Team Members`, `Team Details`, `Activity Log`. Tabs must\n actually switch and only one view is visible at a time.\n4. Generate plausible, specific sample data (real-looking names, IDs, roles,\n departments, dates, percentages). No `Member A / Metric B` placeholders.\n5. Required interactions:\n - tab switching with hash sync (`#members | #details | #activity`)\n - role bar chart animates with easing on first reveal of the details tab\n - chart hover tooltips with precise label + value\n - click any panel/card to zoom; click again or press Esc to restore\n - dark mode toggle that re-derives chart colors from CSS variables\n - \"Export CSV\" button that exports every row currently in the team table,\n including the `Workflow` column\n6. Run through `references/checklist.md` before final output.\n\n## Output contract\n\nEmit one short orientation sentence, then the artifact:\n\n```xml\n\n\n...\n\n```\n\nThe artifact must render correctly when opened directly from disk with no\nbuild step and no network access.","tags":["flowai","live","dashboard","template","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude"],"capabilities":["skill","source-nexu-io","skill-flowai-live-dashboard-template","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/flowai-live-dashboard-template","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (2,136 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:19.974Z","embedding":null,"createdAt":"2026-05-07T12:52:59.790Z","updatedAt":"2026-05-11T06:52:19.974Z","lastSeenAt":"2026-05-11T06:52:19.974Z","tsv":"'1':146 '2':173 '3':183 '4':206 '5':227 '6':298 'access':333 'activ':21,35,149,191,237 'actual':195 'aesthet':14,70 'anim':92,241 'artifact':314,317 'asset':123 'assets/template.html':167,176 'b':225 'bar':30,93,239 'blank':182 'build':328 'built':86,141 'built-in':85 'button':284 'chart':31,94,98,240,251,277 'checklist.md':133 'click':100,258,263 'click-to-zoom':99 'color':154,278 'column':297 'complet':138 'compon':158 'contain':49,77 'contract':306 'contributor':41 'correct':320 'css':163,280 'csv':108,283 'current':289 'dark':104,270 'dashboard':4,9,53,65,120 'data':211 'date':219 'depart':218 'depend':83 'deriv':276 'design.md':150 'detail':20,190,236,249 'direct':323 'disk':325 'distribut':29 'eas':243 'emit':307 'esc':267 'everi':287 'example.html':137 'export':109,282,286 'extern':81 'fil':51 'file':79 'final':303 'first':245 'flowai':2,13,52,69,118 'flowai-live-dashboard-templ':1,117 'galleri':143 'gate':136 'generat':178,207 'hand':140 'hand-built':139 'hash':233 'hover':95,252 'html':50,78 'id':216 'includ':294 'inject':151 'inspir':66 'interact':88,229 'invent':170 'keep':184 'kpi':23 'label':256 'live':3,119 'log':22,192 'look':214 'manag':8,64 'map':116,153 'member':18,26,188,222,235 'metric':224 'mode':105,271 'multi':61 'multi-tab':60 'must':194,318 'name':215 'network':332 'never':177 'new':171 'one':199,308 'onlin':32 'open':322 'orient':310 'output':72,304,305 'p0/p1/p2':134 'panel':42,103 'panel/card':260 'percentag':220 'placehold':226 'plausibl':208 'precis':255 'presenc':33 'press':266 'preview':144 'produc':55 'qualiti':135 're':275 're-der':274 'read':147 'real':213 'real-look':212 'refer':125,132 'references/checklist.md':301 'render':319 'requir':228 'resourc':115 'restor':269 'reveal':246 'role':28,217,238 'row':25,288 'run':299 'runtim':82 'sampl':142,210 'screen':59 'seed':126 'self':48,76 'self-contain':47,75 'sentenc':311 'shell':180 'short':309 'singl':46,58 'single-screen':57 'skill':10,54 'skill-flowai-live-dashboard-template' 'skill.md':122 'source-nexu-io' 'space':156 'sparklin':36 'specif':209 'start':130,174 'stat':24 'step':329 'structur':131 'style':159 'switch':90,196,231 'sync':234 'tab':16,62,89,186,193,230,250 'tabl':27,114,293 'team':7,17,19,63,113,187,189,292 'team-manag':6 'templat':5,121 'template.html':124 'three':15,185 'time':205 'toggl':106,272 'token':160,172 'tooltip':96,253 'top':40 'top-contributor':39 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'typographi':155 'use':127,165 'valu':257 'variabl':164,281 'view':200 'visibl':112,202 'workflow':145,296 'xml':315 'zoom':102,262","prices":[{"id":"79b2255c-73aa-4fa7-815c-322a78f7b0b1","listingId":"1725509f-cc7d-4a0a-bc1a-e693b76f2a33","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-07T12:52:59.790Z"}],"sources":[{"listingId":"1725509f-cc7d-4a0a-bc1a-e693b76f2a33","source":"github","sourceId":"nexu-io/open-design/flowai-live-dashboard-template","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/flowai-live-dashboard-template","isPrimary":false,"firstSeenAt":"2026-05-07T12:52:59.790Z","lastSeenAt":"2026-05-11T06:52:19.974Z"}],"details":{"listingId":"1725509f-cc7d-4a0a-bc1a-e693b76f2a33","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"flowai-live-dashboard-template","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"1efa2c3c3521e81338e4b67a70da74565359154c","skill_md_path":"skills/flowai-live-dashboard-template/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/flowai-live-dashboard-template"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"flowai-live-dashboard-template","description":"Team-management dashboard skill in the FlowAI aesthetic — three tabs\n(Team Members, Team Details, Activity Log), KPI stat row, member table,\nrole distribution bar chart, online presence and activity sparklines,\nand a top-contributors panel, all in a single self-contained HTML file\nwith light/dark theming, hoverable chart tooltips, click-to-zoom panels,\nand CSV export. Use when the brief asks for a team / workspace admin\ndashboard, an interactive admin dashboard with charts, or names FlowAI."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/flowai-live-dashboard-template"},"updatedAt":"2026-05-11T06:52:19.974Z"}}