Compétence Tableau de Bord FlowAI
Produisez un tableau de bord de gestion d'équipe multi-onglets sur un seul écran, inspiré de l'esthétique FlowAI. La sortie est un fichier HTML autonome (aucune dépendance d'exécution externe) avec des interactions intégrées : commutation d'onglets, un graphique à barres animé, des infobulles au survol des graphiques, des panneaux cliquables pour zoomer, un bouton de basculement du mode sombre et une exportation CSV du tableau d'équipe visible.
Carte des ressources
flowai-live-dashboard-template/
├── SKILL.md
├── assets/
│ └── template.html # graine de référence utilisée comme structure de départ
├── references/
│ └── checklist.md # portes de qualité P0/P1/P2
└── example.html # exemple complet construit à la main (aperçu de la galerie)
Flux de travail
- Lisez le DESIGN.md actif (injecté ci-dessus). Mappez les jetons de couleur, typographie,
espacement et de style des composants aux variables CSS utilisées par
assets/template.html. N'inventez pas de nouveaux jetons. - Partez de
assets/template.html; ne générez jamais la coque à partir de zéro. - Conservez trois onglets :
Membres de l'équipe,Détails de l'équipe,Journal d'activité. Les onglets doivent réellement basculer et une seule vue est visible à la fois. - Générez des données d'exemple plausibles et spécifiques (noms, identifiants, rôles,
départements, dates, pourcentages réalistes). Pas d'espaces réservés
Membre A / Métrique B. - Interactions requises :
- commutation d'onglets avec synchronisation de hachage (
#membres | #details | #activite) - le graphique à barres des rôles s'anime avec une transition en douceur lors de la première révélation de l'onglet des détails
- infobulles de graphique au survol avec étiquette précise + valeur
- cliquez sur n'importe quel panneau/carte pour zoomer ; recliquez ou appuyez sur Échap pour restaurer
- bouton de basculement du mode sombre qui recalcule les couleurs des graphiques à partir des variables CSS
- bouton "Exporter CSV" qui exporte chaque ligne actuellement dans le tableau de l'équipe,
y compris la colonne
Flux de travail
- commutation d'onglets avec synchronisation de hachage (
- Parcourez
references/checklist.mdavant la sortie finale.
Contrat de sortie
Émettez une phrase d'orientation courte, puis l'artefact :
<artifact identifier="flowai-team-dashboard" type="text/html" title="Tableau de Bord FlowAI de l'Équipe">
<!doctype html>
<html>...</html>
</artifact>
L'artefact doit s'afficher correctement lorsqu'il est ouvert directement à partir du disque sans étape de construction et sans accès réseau.