kpi-dashboard-design
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.
- License 许可
- MIT
- 最近更新
- 2026-08-24
- Stars
- ★ 2
- Forks
- 0
01 前言 Front Matter
- name
- kpi-dashboard-design
- license
- MIT
- description
- 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.
03 SKILL.md 正文
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
| 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 |
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
/* 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 Type | Chart |
|---|---|
| Trend over time | Line chart |
| Comparison | Bar chart |
| Composition | Pie/Donut |
| Distribution | Histogram |
| Correlation | Scatter plot |
| Funnel stages | Funnel 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
04 同仓库更多 Skills
three-best-practices
Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting, shaders, or TSL.
javascript-best-practices
Modern JavaScript best practices and performance optimization guidelines. Use when writing, reviewing, or refactoring JavaScript code to ensure optimal performance, maintainability, and modern patterns.
css-best-practices
Guidelines for building modern, performant, and accessible CSS using MDN best practices. Use this when styling components, fixing layout shifts, or optimizing CSS performance.
frontend-dev
Full-stack frontend development combining premium UI design, cinematic animations, AI-generated media assets, persuasive copywriting, and visual art. Builds complete, visually striking web pages with real media, advanced motion, and compelling copy. Use when: building landing pages, marketing sites, product pages, dashboards, generating media assets (image/video/audio/music), writing conversion copy, creating generative art, or implementing cinematic scroll animations.
exa-rate-limits
Implement Exa rate limiting, backoff, and idempotency patterns. Use when handling rate limit errors, implementing retry logic, or optimizing API request throughput for Exa. Trigger with phrases like "exa rate limit", "exa throttling", "exa 429", "exa retry", "exa backoff".
exa-deploy-integration
Deploy Exa integrations to Vercel, Fly.io, and Cloud Run platforms. Use when deploying Exa-powered applications to production, configuring platform-specific secrets, or setting up deployment pipelines. Trigger with phrases like "deploy exa", "exa Vercel", "exa production deploy", "exa Cloud Run", "exa Fly.io".