Skip to content
Get packs

FlowAI Team Dashboard Template

Builds a single-file team admin dashboard with tabs, charts, dark mode and CSV export

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
4 files

What it does

When installed, the agent produces a self-contained HTML file for a team or workspace admin dashboard in a FlowAI-inspired style. It starts from a bundled template and includes three tabs (Team Members, Team Details, Activity Log), KPI cards, a member table, charts with hover tooltips, click-to-zoom panels, light/dark mode, and a button that exports the visible team table to CSV. The file is meant to open directly in a browser with no build step or internet connection.

Great for

  • Designers or product teams prototyping an internal admin or team-management screen
  • Front-end developers who want a working HTML starting point with sample data and interactions
  • Anyone who wants a quick interactive mockup to show stakeholders

Skip it if

  • Production systems that need real user data, authentication or a backend, since the output is static HTML with sample data (the template does not connect to any service)
  • Teams that need a dashboard built on their own component library or framework rather than a single HTML file

Try asking

  • “Create a FlowAI-style team management dashboard with Team Members, Team Details and Activity Log tabs and a role-distribution bar chart”
  • “Make an interactive workspace admin dashboard with KPI cards, a member table with status badges, and light/dark mode”
  • “Build a team dashboard prototype with CSV export of the team table”
Step-by-step guide: how to use FlowAI Team Dashboard TemplateInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the Apache-2.0 licence and an attribution note.

    flowai-live-dashboard-template.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip flowai-live-dashboard-template.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip flowai-live-dashboard-template.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide a DESIGN.md or colour and typography tokens first, since the skill maps styling to existing CSS variables and is meant to use them rather than invent new ones
  • Review the sample data and remove any names or figures that should not appear in a shared prototype
  • Open the generated file directly in a browser to check tabs, chart animation and CSV export before sharing

What's inside

  • assets/template.html
  • example.html
  • references/checklist.md
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.