flowai-live-dashboard-template
Creates a dashboard for managing teams with member and activity tabs. Shows important charts and statistics.
What it does
Creates an online dashboard for managing teams. It displays information about team members, details, and recent activities on a single, easy-to-use page.
When to use it
- ✓When you need to visualize your team's performance.
- ✓To track team members' activities and online presence.
- ✓When organizing team information into a clear, interactive format.
Example of what to ask your AI
“Create a FlowAI-style team dashboard.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI uses a pre-defined template and fills it with realistic sample data. It ensures all features, like tab switching and interactive charts, work correctly.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill flowai-live-dashboard-templateOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/flowai-live-dashboard-template/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
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.
FAQ
What is the FlowAI style?
It's a specific visual style that dictates the dashboard's appearance, including colors, fonts, and spacing, as outlined in the template.
Can I export the data?
Yes, you can export the data from the team members table in CSV format.
Does the dashboard work offline?
Yes, the dashboard is a self-contained HTML file and requires no internet connection or build steps to function.
Details
Original description by the author
Team-management dashboard skill in the FlowAI aesthetic — three tabs (Team Members, Team Details, Activity Log), KPI stat row, member table, role distribution bar chart, online presence and activity sparklines, and a top-contributors panel, all in a single self-contained HTML file with light/dark theming, hoverable chart tooltips, click-to-zoom panels, and CSV export. Use when the brief asks for a
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #417
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC