Build Insightful KPI Dashboards
Designs and builds KPI dashboards: executive and operational layouts, KPI selection, visualization, alerting, and performance.
Why it matters
Design and construct dynamic KPI dashboards that provide clear, actionable insights into business performance. Optimize data visualization and user experience for effective decision-making.
Outcomes
What it gets done
Define and select SMART KPIs aligned with business objectives.
Architect dashboard layouts for optimal information density and visual hierarchy.
Implement real-time data pipelines and alerting systems.
Generate code for responsive KPI card and chart visualizations.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/vb-kpi-dashboard-builder | bash Overview
KPI Dashboard Builder
Designs and builds KPI dashboards covering executive and operational architecture patterns, KPI selection, real-time data pipelines, alerting, and responsive, accessible visualization. Use when designing a new KPI dashboard, selecting metrics, building real-time update pipelines, or configuring alerts for metric anomalies.
What it does
Designs, builds, and optimizes Key Performance Indicator dashboards - applying business intelligence and data visualization best practices to metric selection, dashboard architecture, real-time data pipelines, alerting, and responsive layout.
When to use - and when NOT to
Use this skill when designing a new executive or operational KPI dashboard, selecting which metrics belong on a dashboard, building real-time data pipelines for live KPI updates, configuring alert thresholds for metric anomalies, or making an existing dashboard responsive across mobile/tablet/desktop. Not a fit for building a general-purpose BI tool or data warehouse from scratch, or for one-off ad hoc reports that are not intended as a persistent dashboard.
Inputs and outputs
Core design principles include the 5-Second Rule (critical KPIs immediately understandable), information density guidance (aim for 7±2 visual elements per screen section), progressive disclosure with drill-down, and 12/16-column responsive grids. KPI selection is framed around the SMART criteria, balancing leading (predictive) vs. lagging (outcome) metrics, and an actionability test requiring every KPI to have a clear associated action.
Provides two dashboard architecture patterns: an executive dashboard layout (JavaScript config) with header KPIs (revenue, profit margin, customer acquisition with trend/target/forecast flags), trend and waterfall charts, 15-minute refresh, and minimal interactivity; and an operational dashboard config (Python) with real-time metrics, warning/critical alert thresholds (response time, error rate, throughput), and drill-down levels from system overview to individual transactions.
Includes concrete implementation examples: a KPI card CSS component with trend-color states, a Chart.js-style revenue trend chart configuration with actual-vs-target lines and currency-formatted tooltips, a Python KPIDashboardDataManager class managing a websocket-based real-time KPI pipeline with trend calculation, a YAML alert configuration defining revenue-decline and conversion-rate-anomaly rules with severity and recipients, a mobile-first responsive CSS grid (1/2/4 columns across breakpoints), and JavaScript skeleton-loader and error-handling patterns for dashboard loading states.
Best practices cover color psychology for KPI states (green/red/blue/orange/gray), data refresh strategy tiers by KPI criticality (real-time through batch), and a dashboard testing checklist covering load time, data accuracy, usability, WCAG 2.1 AA accessibility, and cross-device functionality.
Integrations
Implementation examples use JavaScript/Chart.js-style charting, Python for real-time data pipelines and operational config, CSS for KPI card and responsive grid styling, YAML for alert configuration, and WebSocket connections for live KPI updates.
Who it's for
BI and product teams designing or rebuilding KPI dashboards who need concrete architecture patterns, component code, and alerting configuration rather than generic dashboarding advice - useful for both executive-summary dashboards and real-time operational monitoring views.
alerts:
revenue_decline:
condition:
type: percentage_change
threshold: -10
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.