mcpField
F
flowai-live-dashboard-template

flowai-live-dashboard-template

github.com/nexu-ioProductivity104.6k70 installsUpdated today
Repository

About flowai-live-dashboard-template

flowai-live-dashboard-template is a skill for generating a single-screen, multi-tab team dashboard as a self-contained HTML file. It specifies working tabs, chart interactions, dark mode, and CSV export, with a template-based workflow and quality checklist.

Key features

  1. 01Self-contained HTML dashboard
  2. 02Three interactive tabs
  3. 03Animated role bar chart
  4. 04Chart tooltips and panel zoom
  5. 05Dark mode toggle
  6. 06Team table CSV export

Use cases

  1. 01Creating a team management dashboard
  2. 02Reviewing team details through a role chart
  3. 03Exporting visible team table rows to CSV

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill flowai-live-dashboard-template

After installing, type/flowai-live-dashboard-templatein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project README

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:

<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.

Comments

Markdown supported