AGENT SKILL

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

VRIL-LABS
VRIL-LABS/skill-jam

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.

Skill与智能体开发
★ 2
VRIL-LABS
VRIL-LABS/skill-jam

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.

★ 2
VRIL-LABS
VRIL-LABS/skill-jam

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.

前端开发
★ 2
VRIL-LABS
VRIL-LABS/skill-jam

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.

设计师前端开发视觉设计
★ 2
VRIL-LABS
VRIL-LABS/skill-jam

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".

★ 2
VRIL-LABS
VRIL-LABS/skill-jam

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".

运维与部署
★ 2