XG
Open to work
Tous les skills
Style·DASHBOARD · DATA

Style Growth

Dashboards growth : KPI cards, sparklines, tables triables, filtres avancés. Pour les outils analytics, produits de pilotage.

Télécharger SKILL.md~/.claude/skills/style-growth/SKILL.md
Installation en 30 secondes
mkdir -p ~/.claude/skills/style-growth
curl -o ~/.claude/skills/style-growth/SKILL.md \
  https://xavierguiter.com/claude-skills/style-growth/SKILL.md
# relance Claude Code, le skill est prêt

Style Growth

L'utilisateur ouvre le dashboard pour décider. Chaque pixel doit aider à la décision.

Palette

  • BG: gris très clair #f8fafc (light) ou anthracite #0f1729 (dark).
  • Cards: blanc pur ou gris légèrement plus clair que le BG.
  • Data colors: distinctes et à contraste élevé - bleu #3b82f6, vert #10b981, orange #f97316, violet #8b5cf6, rouge #ef4444.
  • Trends: vert #10b981 (up), rouge #ef4444 (down), gris #94a3b8 (flat).

Typographie

  • Numbers: mono OU tabular numbers (Söhne, Inter with font-variant-numeric: tabular-nums).
  • Labels: sans neutre, uppercase small letter-spacing 0.05em.
  • Body: 14-15 px (densité info élevée).

Layout

  • Header : filtres globaux (période, segment, comparaison) sticky en haut.
  • Grid de KPI cards (4-6 par ligne desktop) : label, chiffre gros, delta vs période, sparkline.
  • Sous les KPIs : charts (line, bar, area) et tables tri/filter.
  • Sidebar navigation étroite (60-80px) avec icônes only.

Data viz

  • Line charts pour tendances temporelles.
  • Bar charts pour comparaisons discrètes.
  • Heatmaps pour patterns 2D.
  • Toujours afficher les axes, la légende, le tooltip au hover.
  • Empty states clairs : "Aucune donnée pour cette période - essaie X."

Composants signature

  • KPI card: { label, value, delta, sparkline, drill-down link }.
  • Table filtrable, triable, exportable CSV.
  • Segments modifiables (+ pour créer un segment custom).
  • Alertes conditionnelles ("si conversion < X, notifier").

Rules

  • Densité > décoration. Pas de padding gratuit.
  • Toujours indiquer la période comparée pour un delta.
  • Chart hover = tooltip précis, pas seulement une couleur qui change.
Skill suivant

Style Social

→