FlowAI-Dashboard-Skill

FlowAI Dashboard Skill

Erstelle ein einbildschirmiges, mehrreiteriges Team-Management-Dashboard im Stil von FlowAI. Die Ausgabe ist eine in sich geschlossene HTML-Datei (keine externen Laufzeitabhängigkeiten) mit integrierten Interaktionen: Reiterwechsel, ein animiertes Balkendiagramm, Hover-Tooltips auf Diagrammen, Click-to-Zoom-Panels, Dark-Mode-Umschaltung und CSV-Export der sichtbaren Teamtabelle.

Ressourcenübersicht

flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│   └── template.html          # Referenzvorlage als Startstruktur
├── references/
│   └── checklist.md           # P0/P1/P2 Qualitätsgates
└── example.html               # vollständiges handgebautes Beispiel (Galerievorschau)

Arbeitsablauf

1. Lies die aktive DESIGN.md (oben eingefügt). Ordne Farb-, Schrift-, Abstands- und Komponentenstyling-Tokens den CSS-Variablen zu, die von assets/template.html verwendet werden. Erfinde keine neuen Tokens.
2. Beginne mit assets/template.html; erstelle das Gerüst niemals von Grund auf.
3. Behalte drei Reiter bei: Team Members, Team Details, Activity Log. Die Reiter müssen tatsächlich wechseln und es darf immer nur eine Ansicht sichtbar sein.
4. Generiere plausible, konkrete Beispieldaten (echt wirkende Namen, IDs, Rollen, Abteilungen, Daten, Prozentangaben). Keine Platzhalter wie „Mitglied A / Metrik B".
5. Erforderliche Interaktionen:
   • Reiterwechsel mit Hash-Synchronisierung (#members | #details | #activity)
   • Rollen-Balkendiagramm mit Animation und Easing beim ersten Anzeigen des Detail-Reiters
   • Diagramm-Hover-Tooltips mit genauer Bezeichnung und Wert
   • Klick auf ein beliebiges Panel/eine Karte zum Vergrößern; erneuter Klick oder Escape-Taste zum Zurücksetzen
   • Dark-Mode-Umschaltung, die Diagrammfarben aus den CSS-Variablen ableitet
   • „Export CSV"-Button, der jede aktuell in der Teamtabelle angezeigte Zeile exportiert, einschließlich der Spalte Workflow
6. Führe die finale Ausgabe durch references/checklist.md aus.

Ausgabevertrag

Gib einen kurzen Orientierungssatz aus, dann das Artefakt:

<artifact identifier="flowai-team-dashboard" type="text/html" title="FlowAI Team Dashboard">
<!doctype html>
<html>...</html>
</artifact>

Das Artefakt muss korrekt rendern, wenn es direkt von der Festplatte geöffnet wird – ohne Build-Schritt und ohne Netzwerkzugriff.