Skill de Tableau de Bord
Produire un écran unique de tableau de bord d'administration / analytique.
Flux de travail
- Lire le DESIGN.md actif (injecté ci-dessus). Couleurs, typographie, espacements, styles des composants proviennent tous de ce fichier. N'inventez pas de nouveaux tokens.
- Classifier ce que le tableau de bord surveille (ventes, trafic, utilisation, incidents, opérations, etc.) à partir du brief. Générer des noms et valeurs de métriques spécifiques et plausibles — pas de placeholders « Métrique A / Métrique B ».
- Disposer les régions requises :
- Barre latérale gauche (220–260px) : marque de la société en haut, 6–8 liens de navigation avec icônes, état actif utilisant la couleur d'accentuation du DS.
- Barre supérieure : titre de la page à gauche, champ de recherche + avatar/statut de l'utilisateur à droite.
- Contenu principal :
- Ligne 1 : 3–4 cartes KPI (étiquette + grand nombre + variation par rapport à la période précédente).
- Ligne 2 : un graphique principal (pleine largeur ou 2/3) — rendu sous forme de graphique SVG inline (lignes, barres ou aires) à partir de nombres réalistes.
- Ligne 3 : un graphique secondaire ou un tableau (événements récents, éléments principaux, etc.).
- Écrire un document HTML autonome :
<!doctype html>jusqu'à</html>, CSS dans un bloc<style>inline.- CSS Grid pour la disposition globale ; Flexbox à l'intérieur des cartes.
- HTML sémantique :
<aside>,<header>,<main>,<section>. - Étiqueter chaque région logique avec
data-od-id="slug"pour le mode commentaire.
- Graphiques : SVG inline uniquement, aucune bibliothèque JS. Un graphique en lignes contient ~10 lignes de
<polyline>avec un remplissage subtil de zone. Un graphique en barres contient N<rect>avec remplissage de la couleur d'accentuation du DS. Étiqueter légèrement les axes (texte atténué, échelle réduite). - Auto-vérification :
- Chaque couleur provient des tokens de DESIGN.md.
- La couleur d'accentuation est utilisée au maximum deux fois (élément actif de la barre latérale + surbrillance d'un graphique).
- Barre latérale + barre supérieure sont collantes ; le contenu principal défile indépendamment.
- La densité correspond à l'ambiance du DS — les DS aérés ont plus de marges internes, les DS denses (trading, crypto) resserrent les lignes.
Contrat de sortie
Émettre entre les balises <artifact> :
<artifact identifier="slug-du-tableau-de-bord" type="text/html" title="Titre du Tableau de Bord">
<!doctype html>
<html>...</html>
</artifact>
Une phrase avant l'artefact, rien après.