Aller au guide d’utilisation
kpi-dashboard-designpar Seth Hobson

KPI Dashboard Design Skill.

Un skill Claude Code et Codex pour diagrammes et graphiques : tableaux de bord KPI : sélection de métriques, choix de graphiques, mise en page et motifs temps réel.

  • Diagrammes et visualisation de données
  • Dashboard
wshobson/agents · plugins/business-analytics/skills/kpi-dashboard-design/SKILL.mdSKILL.md
--- name: kpi-dashboard-design description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict … --- ## When to Use This Skill ## Core Concepts ## Detailed worked examples and patterns ## Best Practices ## Related Skills
En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 5 423 caractères au total

01 Ce qu'il fait

Ce que fait le skill kpi-dashboard-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill fournit des schémas complets pour concevoir des tableaux de bord d'indicateurs clés de performance qui orientent les décisions métier. Il couvre trois niveaux de tableau de bord — stratégique pour les dirigeants avec des mises à jour mensuelles/trimestrielles, tactique pour les managers avec des mises à jour hebdomadaires/mensuelles, et opérationnel pour les équipes avec des mises à jour en temps réel/quotidiennes.

Ce skill couvre l'ensemble du cycle de vie : sélectionner des indicateurs clés pertinents à l'aide du cadre SMART, choisir des visualisations adaptées, établir une hiérarchie de tableaux de bord allant du résumé exécutif aux vues départementales jusqu'aux analyses détaillées, et résoudre les problèmes courants tels que les incohérences de métriques entre départements, la lassitude liée aux alertes et les problèmes de performance de base de données causés par des requêtes en temps réel. Il inclut des schémas SQL et Python concrets pour l'analyse de cohortes, la normalisation du MRR, les métriques pré-agrégées et les seuils d'alerte dynamiques.

Ce qu'il produit

  • Requêtes SQL avec formules de normalisation explicites documentées dans des info-bulles ou des dictionnaires de données
  • Code Python pour des instantanés de métriques pré-agrégées séparant les charges OLAP et OLTP
  • Logique de seuil d'alerte dynamique utilisant des moyennes mobiles et l'écart type
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Définir le niveau de KPI et l'audience

    Faire correspondre la portée du tableau de bord à l'un des trois niveaux : stratégique pour les dirigeants avec des mises à jour mensuelles/trimestrielles, tactique pour les managers avec des mises à jour hebdomadaires/mensuelles, ou opérationnel pour les équipes avec des mises à jour en temps réel/quotidiennes.

  2. 02
    Appliquer les critères SMART à chaque métrique

    Veillez à ce que chaque KPI soit Spécifique avec une définition claire, Mesurable et quantifiable, Atteignable avec des objectifs réalistes, Pertinent et aligné sur les objectifs, et Temporellement défini avec une période précise.

  3. 03
    Construire une hiérarchie à trois niveaux

    Structurez les tableaux de bord avec une page de synthèse exécutive affichant 4 à 6 KPI principaux avec indicateurs de tendance et alertes clés, des vues par département pour les ventes/marketing/opérations/finances, et des analyses détaillées pour l'analyse des causes profondes.

  4. 04
    Limiter la portée et montrer le contexte

    Limitez-vous à 5-7 KPI maximum par vue et incluez toujours des comparaisons, des tendances et des objectifs afin que les utilisateurs puissent interpréter les chiffres de manière pertinente.

  5. 05
    Permettre l'exploration de la synthèse au détail

    Concevez des parcours de navigation permettant aux utilisateurs de passer des métriques exécutives de haut niveau aux données détaillées et à l'analyse des causes profondes derrière chaque chiffre.

02 Trouvez celui qui vous convient

Quand utiliser la skill kpi-dashboard-design

Utilisez la skill kpi-dashboard-design dans Claude Code ou Codex lorsque le travail concerne des diagrammes et graphiques de ce type. Portée et limites ci-dessous proviennent du fichier de la skill.

Bon choix

  • Construire un tableau de bord exécutif de métriques SaaS suivant le MRR, le churn et les ratios LTV/CAC
  • Concevoir un centre d'opérations avec surveillance en direct de la santé du service et du débit des requêtes
  • Créer une vue d'analyse de rétention par cohorte pour une équipe produit
  • Déboguer un tableau de bord où les métriques se contredisent en raison d'une méthodologie de calcul incohérente
  • Établir une gouvernance des métriques pour garantir des définitions cohérentes dans toute l'organisation

    Quoi fournir

    • Définitions de métriques existantesPartagez la façon dont les métriques sont actuellement calculées (par exemple le traitement du MRR pour les plans annuels ou la logique de regroupement par cohorte) pour diagnostiquer les incohérences ou aligner les formules.

    03 Dans le skill

    Règles que le Skill kpi-dashboard-design donne à Claude Code et Codex

    7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

    1. Utiliser une sémantique des couleurs cohérente

      Appliquez le rouge pour indiquer une performance négative ou un problème et le vert pour indiquer une performance positive ou un statut sain, de manière cohérente sur toutes les vues du tableau de bord.

    2. Ne jamais afficher de métriques de vanité

      Excluez les métriques qui semblent impressionnantes mais qui ne conduisent à aucune décision exploitable. Concentrez-vous uniquement sur les données sur lesquelles les équipes peuvent agir pour améliorer les résultats.

    3. Ne jamais utiliser de graphiques 3D

      Évitez les visualisations tridimensionnelles car elles déforment la perception et rendent plus difficile pour les utilisateurs la comparaison précise des valeurs.

    4. Documenter la méthodologie de calcul

      Ne masquez jamais la façon dont les métriques sont calculées. Documentez toujours les formules et la logique, idéalement directement sur la carte du tableau de bord ou dans des infobulles, afin d'éviter les interprétations contradictoires.

    5. Adapter la fréquence de mise à jour au type de métrique

      Définissez des taux de rafraîchissement du tableau de bord adaptés à chaque KPI : temps réel ou quotidien pour les métriques opérationnelles, hebdomadaire ou mensuel pour les métriques tactiques, et mensuel ou trimestriel pour les métriques stratégiques.

    6. Garantir un design mobile réactif

      Concevez des tableaux de bord fonctionnant efficacement sur mobile, pas seulement sur écran de bureau, afin que les dirigeants et les équipes puissent accéder aux métriques essentielles n'importe où.

    7. Préserver l'espace blanc pour la compréhension

      Évitez de surcharger les mises en page du tableau de bord avec trop d'éléments. L'espace blanc facilite la compréhension et aide les utilisateurs à se concentrer sur les métriques les plus importantes.

    04 Mettez-le en pratique

    Installer kpi-dashboard-design dans Claude Code ou Codex

    Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

    Ajouter kpi-dashboard-design à Claude Code, Codex ou votre agent

    Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

    Terminal
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    Forme générique CLI skills pour plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md ; le dépôt peut documenter son propre chemin.

    Confier à la skill une première tâche de diagrammes et graphiques

    Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

    Starter prompt
    Design an executive SaaS metrics dashboard for [our company] that tracks monthly recurring revenue, customer churn rate, and LTV/CAC ratio. The dashboard needs to update weekly and show trends over the past 12 months with comparisons to our target goals. We've been getting conflicting MRR numbers between this dashboard and finance reports because annual subscriptions are normalized differently. Include the calculation methodology directly on each metric card and ensure the design works on mobile devices for our remote executive team.

    Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

    Vérifiez le premier résultat

    Ce que le SKILL.md lui-même présente comme un résultat correct :

    • Vérifiez que les requêtes de cohorte utilisent DATE_TRUNC('month', created_at) plutôt qu'une troncature de date au niveau du jour, qui crée des cohortes trop petites pour montrer des tendances
    • Vérifiez que les métriques de qualité perçues par l'utilisateur, comme le temps de chargement de page P95 et le taux d'achèvement des tâches, accompagnent les métriques de disponibilité de l'infrastructure
    • Testez que les tableaux de bord en temps réel lisent depuis des tables de synthèse pré-agrégées plutôt que d'exécuter des requêtes complexes sur la base de production
    • Validez que les seuils d'alerte sont dynamiques, basés sur des moyennes glissantes plutôt que sur des valeurs statiques qui provoquent une lassitude face aux alertes

    Dans OpenDesign, importez kpi-dashboard-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

    05 Open source, traçable

    Source, licence et vérification

    D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

    Repository
    github.com/wshobson/agents Branche main
    Fichier du skill
    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 4236bb9
    License
    MIT D'après LICENSE.
    Étoiles du dépôt
    39 635 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt wshobson/agents, qui contient 18 skills dans ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'utilisation pour kpi-dashboard-design.
    Vérifié par OpenDesign
    2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

    Dans le SKILL.md

    1. Quand utiliser ce skillListe six scénarios : tableaux de bord exécutifs, sélection de KPI, surveillance en temps réel, vues par département, améliorations de mise en page, gouvernance des métriques
    2. Concepts fondamentauxDéfinit le cadre KPI à trois niveaux, les critères des KPI SMART, et la structure hiérarchique à trois paliers du tableau de bord
    3. Exemples concrets détaillés et modèlesRenvoie à references/details.md pour les KPI courants par département et des modèles plus approfondis
    4. Bonnes pratiquesCinq choses à faire (limiter les KPI, montrer le contexte, couleurs cohérentes, exploration détaillée, mises à jour adaptées) et cinq à éviter (métriques de vanité, surcharge, graphiques 3D, méthodologie cachée, ignorer le mobile)
    5. Résolution de problèmesRésout cinq problèmes : conflits MRR/finance, infrastructure au vert mais utilisateurs mécontents, cohortes plates, sollicitation excessive de la base de données, lassitude face aux alertes
    6. Skills associésRenvoie au skill data-storytelling pour transformer les résultats du tableau de bord en récits destinés aux dirigeants
    Description du skill lui-même
    « Concevez des tableaux de bord KPI efficaces avec sélection de métriques, bonnes pratiques de visualisation et modèles de surveillance en temps réel. Utilisez ce skill lors de la construction d'un tableau de bord de métriques SaaS exécutives suivant MRR, churn et ratios LTV/CAC ; la conception d'un centre opérationnel avec santé de service en direct et débit de requêtes ; la création d'une vue d'analyse de rétention par cohorte pour une équipe produit ; ou le débogage d'un tableau de bord où les métriques se contredisent en raison d'une méthodologie de calcul incohérente. »

    Description du front-matter issue de SKILL.md. Le fichier complet fait environ 5 423 caractères. Lire le fichier complet sur GitHub.

    06 Avant d'installer

    Questions sur le skill kpi-dashboard-design

    Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

    Que faire si le tableau de bord affiche des métriques saines mais que les utilisateurs se plaignent ?

    Le tableau de bord suit probablement des métriques d'infrastructure comme la disponibilité de l'API, mais pas la qualité perçue par l'utilisateur. Ajoutez des métriques perçues par le client comme le temps de chargement de page P95, le taux d'achèvement des tâches et le volume de tickets support, en complément de la disponibilité et des taux d'erreur de l'infrastructure. La santé du système ne reflète pas toujours l'expérience utilisateur.

    KPI Dashboard Design

    Exécuter kpi-dashboard-design sur une tâche concrète de diagrammes et de graphiques.

    Téléchargez OpenDesign, importez kpi-dashboard-design depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

    Terminal
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    OpenDesign Desktop

    Un seul design system. Votre marque, cohérente partout

    Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

    • Sites, slides, prototypes, dashboards, images et vidéos
    • Plus de 140 design systems et la bibliothèque complète de modèles et skills
    • Codex local et plus de 21 agents de code · Gratuit
    Télécharger gratuitement

    Disponible sur macOS et Windows