flowai-live-dashboard-template

Files (4)

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

SKILL.md (first lines)

# 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

With file tools, save or edit `index.html`; the saved file is the deliverable. Finish with a brief reference to that file and a summary of the change. Keep the user's topic in the document title.

<readable-delivery channel="no-file-tools">
Only without file tools, use this chat delivery channel with the stable identifier `index` and the user's topic in `title`:

Emit one short orientation sentence, then the artifact:

```xml
<artifact identifier="index" 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.
</readable-delivery>

From sanghyunna/readable-studio, Apache-2.0.

More from sanghyunna/readable-studio