New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

FlowAI Dashboard

Free

Create an interactive team management dashboard with ease.

by nexu-io84.9k stars on nexu-io/open-design
4 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What FlowAI Dashboard does

The FlowAI Dashboard skill provides developers and designers with a streamlined solution for creating a comprehensive team management dashboard. This skill generates a self-contained HTML file that includes three distinct tabs: Team Members, Team Details, and Activity Log. Each tab is designed to present relevant information clearly and interactively, allowing users to engage with the data effectively. The dashboard is inspired by the FlowAI aesthetic, ensuring a modern and visually appealing interface.

The skill supports various interactive features, such as tab switching, animated bar charts, hover tooltips for detailed chart information, and a dark mode toggle. Users can easily export the visible team table data to CSV format, making it convenient to share or analyze the information outside the dashboard. The built-in interactions enhance user experience, allowing team managers to focus on their tasks without being bogged down by complex setups.

To utilize the FlowAI Dashboard skill, users should follow the provided workflow instructions, which guide them through customizing the dashboard to their specific needs. By mapping design tokens from an active DESIGN.md file to the dashboard's CSS variables, users can ensure consistency with their existing design systems. The skill also encourages the generation of realistic sample data, making it easier to visualize how the dashboard will function in a real-world scenario.

This skill is ideal for team leaders, project managers, and anyone responsible for overseeing team activities and performance. It simplifies the process of creating a functional and aesthetically pleasing dashboard, making team management more efficient and organized.

When to use it

Use this skill when you need to create an interactive admin dashboard for team management that includes charts and data export functionality.

When not to use it

This skill is not suitable for scenarios requiring complex backend integrations or real-time data updates, as it generates a static HTML file.

What you can build with it

Creating a Team Overview

Use the FlowAI Dashboard to provide a quick overview of team members and their roles, enhancing visibility for project leads.

Monitoring Team Activity

Utilize the Activity Log tab to track team contributions and engagement over time, helping to identify top performers.

Exporting Team Data

Leverage the CSV export feature to generate reports for stakeholders or for further analysis in other tools.

How to install FlowAI Dashboard

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/flowai-live-dashboard-template --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.

Frequently asked questions about FlowAI Dashboard

Similar skills

Canva Creator

Streamline your content campaign from brief to HubSpot.

Cowork Plugin Customization

Tailor your Claude Code plugin to fit your organization.

Impediment Prioritization

Rank and prioritize impediments effectively.

Chronicle

Streamline your Copilot session analysis and reporting.

Idea Refine

Transform vague ideas into actionable concepts.

App Store Optimization

Optimize your mobile app's visibility and performance.