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.
/plugin marketplace add secondsky/claude-skills/plugin install kpi-dashboard-design@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Design effective dashboards that communicate key metrics clearly.
Good KPIs are:
| Goal | KPIs |
|---|---|
| Revenue | MRR, ARR, Revenue Growth |
| Acquisition | CAC, New Users, Conversion Rate |
| Retention | Churn Rate, NPS, DAU/MAU |
| Efficiency | LTV:CAC, Burn Rate |
| Quality | Error Rate, Response Time |
┌─────────────────────────────────────────────────┐
│ Executive Summary │
│ [Revenue ▲12%] [Users ▲8%] [Churn ▼2%] │
├─────────────────────┬───────────────────────────┤
│ │ │
│ Revenue Trend │ User Acquisition │
│ (Line Chart) │ (Bar Chart) │
│ │ │
├─────────────────────┼───────────────────────────┤
│ │ │
│ Retention Funnel │ Top Products │
│ (Funnel Chart) │ (Table) │
│ │ │
└─────────────────────┴───────────────────────────┘
/* 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;
}
| Data Type | Chart |
|---|---|
| Trend over time | Line chart |
| Comparison | Bar chart |
| Composition | Pie/Donut |
| Distribution | Histogram |
| Correlation | Scatter plot |
| Funnel stages | Funnel chart |
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.