Kpi Dashboard Design

by secondsky88378361314fMIT227 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 10 days ago

Designs effective KPI dashboards with proper metric selection, visual hierarchy, and data visualization best practices. Use when building executive dashboards, creating analytics views, or presenting business metrics.

AI-generated overview

Guides the design of KPI dashboards, covering metric selection, layout, chart choice and visual hierarchy.

What it does
This skill provides guidance for designing KPI dashboards, including a framework for choosing good KPIs, a table of common business KPIs by goal, and a sample dashboard layout. It also covers visual design principles such as status colors and hierarchy, chart selection by data type, interactivity features, best practices and common mistakes. It produces design guidance rather than files or code.
When to use it
Use it when building executive dashboards, creating analytics views, or presenting business metrics to stakeholders. It suits planning stages where metric selection, layout and chart choices need to be decided.
Requirements
No tools, packages or credentials are required; the skill is instructions only and ships no scripts.

KPI Dashboard Design

Design effective dashboards that communicate key metrics clearly.

KPI Selection Framework

Good KPIs are:

  • Relevant to business goals
  • Measurable and quantifiable
  • Influenced by the team
  • Updated frequently
  • Simple to understand

Common Business KPIs

GoalKPIs
RevenueMRR, ARR, Revenue Growth
AcquisitionCAC, New Users, Conversion Rate
RetentionChurn Rate, NPS, DAU/MAU
EfficiencyLTV:CAC, Burn Rate
QualityError Rate, Response Time

Dashboard Layout

┌─────────────────────────────────────────────────┐│              Executive Summary                  ││  [Revenue ▲12%]  [Users ▲8%]  [Churn ▼2%]      │├─────────────────────┬───────────────────────────┤│                     │                           ││   Revenue Trend     │    User Acquisition      ││   (Line Chart)      │    (Bar Chart)           ││                     │                           │├─────────────────────┼───────────────────────────┤│                     │                           ││   Retention Funnel  │    Top Products          ││   (Funnel Chart)    │    (Table)               ││                     │                           │└─────────────────────┴───────────────────────────┘

Visual Design Principles

css
/* Traffic light colors for status */.metric-good { color: #22c55e; }    /* Green */.metric-warning { color: #f59e0b; } /* Amber */.metric-bad { color: #ef4444; }     /* Red */
/* Visual hierarchy */.metric-primary {  font-size: 2.5rem;  font-weight: 700;}
.metric-secondary {  font-size: 1.5rem;  font-weight: 500;}

Chart Selection

Data TypeChart
Trend over timeLine chart
ComparisonBar chart
CompositionPie/Donut
DistributionHistogram
CorrelationScatter plot
Funnel stagesFunnel chart

Interactivity Features

  • Drill-down to detailed views
  • Date range selection
  • Filtering by segment
  • Export to CSV/PDF
  • Scheduled email reports

Best Practices

  • Limit to 5-7 KPIs per dashboard
  • Show trends, not just snapshots
  • Use consistent color coding
  • Include comparison periods (vs last month)
  • Update data in real-time or hourly
  • Review dashboard relevance quarterly

Common Mistakes

  • Too many metrics (information overload)
  • No clear visual hierarchy
  • Missing context (no comparisons)
  • Outdated or stale data
  • Metrics without ownership

Source and attribution

Source:secondsky/claude-skillsinplugins/kpi-dashboard-design/skills/kpi-dashboard-designat commit8837836

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Kpi Dashboard Design Agent Skill | SourceWeft