102.7K+Download
Skip to the usage guide
kpi-dashboard-designby Seth Hobson

KPI Dashboard Design Skill.

A Claude Code and Codex skill for diagrams and charts: KPI dashboards: metric selection, chart choice, layout, and real-time patterns.

  • Diagrams & Data Visualization
  • Dashboard
Download OpenDesignView usage guide
wshobson/agents · plugins/business-analytics/skills/kpi-dashboard-design/SKILL.mdSKILL.md
--- name: kpi-dashboard-design description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict … --- ## When to Use This Skill ## Core Concepts ## Detailed worked examples and patterns ## Best Practices ## Related Skills
Front matter and section headings read from the upstream file on 2026-09-14 · 5,423 characters in full

01 What it does

What the kpi-dashboard-design Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

This skill provides comprehensive patterns for designing Key Performance Indicator dashboards that drive business decisions. It covers three dashboard levels—strategic for executives with monthly/quarterly updates, tactical for managers with weekly/monthly updates, and operational for teams with real-time/daily updates.

The skill addresses the full lifecycle: selecting meaningful KPIs using the SMART framework, choosing appropriate visualizations, establishing dashboard hierarchy from executive summary through department views to detailed drilldowns, and troubleshooting common issues like metric inconsistencies between departments, alert fatigue, and database performance problems caused by real-time queries. It includes concrete SQL and Python patterns for cohort analysis, MRR normalization, pre-aggregated metrics, and dynamic alert thresholds.

What it produces

  • A dashboard plan covering headline KPIs, context, drilldowns, layout and update cadence.
  • Calculation or query recommendations for the specific problem; the bundled SQL and Python snippets are illustrative patterns, not ready-made production pipelines.
See the example prompt ↗

How It Works

  1. 01
    Define KPI Level and Audience

    Match dashboard scope to one of three levels: strategic for executives with monthly/quarterly updates, tactical for managers with weekly/monthly updates, or operational for teams with real-time/daily updates.

  2. 02
    Apply SMART Criteria to Each Metric

    Ensure every KPI is Specific with clear definition, Measurable and quantifiable, Achievable with realistic targets, Relevant and aligned to goals, and Time-bound with a defined period.

  3. 03
    Build three-tier Hierarchy

    Structure dashboards with an executive summary page showing 4-6 headline KPIs with trend indicators and key alerts, department views for sales/marketing/operations/finance, and detailed drilldowns for root cause analysis.

  4. 04
    Limit Scope and Show Context

    Focus on 5-7 KPIs maximum per view and always include comparisons, trends, and targets so users can interpret the numbers meaningfully.

  5. 05
    Enable Drilldown from Summary to Detail

    Design navigation paths so users can click from high-level executive metrics down to the detailed data and root cause analysis behind each number.

02 Find your fit

When to Use the kpi-dashboard-design Skill

Use the kpi-dashboard-design skill in Claude Code or Codex when the job is diagrams and charts of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios
  • Designing an operations center with live service health and request throughput monitoring
  • Creating a cohort retention analysis view for a product team
  • Debugging a dashboard where metrics contradict each other due to inconsistent calculation methodology
  • Establishing metric governance to ensure consistent definitions across the organization

Know the Boundaries

  • This guidance does not connect your data sources or establish your organization's metric definitions. Example MRR formulas and alert thresholds require validation against the actual business model and data.

What to Provide

  • Existing metric definitionsShare how metrics are currently calculated (such as MRR treatment of annual plans or cohort grouping logic) to diagnose inconsistencies or align formulas.

03 Inside the skill

Rules the kpi-dashboard-design Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Use Consistent Color Semantics

    Apply red to indicate negative performance or problems and green to indicate positive performance or healthy status consistently across all dashboard views.

  2. Never Show Vanity Metrics

    Exclude metrics that look impressive but do not drive actionable decisions. Focus only on data that teams can act upon to improve outcomes.

  3. Never Use 3D Charts

    Avoid three-dimensional visualizations because they distort perception and make it harder for users to accurately compare values.

  4. Document Calculation Methodology

    Never hide how metrics are calculated. Always document formulas and logic, ideally directly on the dashboard card or in tooltips to prevent conflicting interpretations.

  5. Match Update Frequency to Metric Type

    Set dashboard refresh rates appropriate to each KPI: real-time or daily for operational metrics, weekly or monthly for tactical metrics, and monthly or quarterly for strategic metrics.

  6. Ensure Responsive Mobile Design

    Design dashboards to work effectively on mobile devices, not just desktop screens, so executives and team members can access critical metrics anywhere.

  7. Preserve White Space for Comprehension

    Avoid overcrowding dashboard layouts with too many elements. White space aids comprehension and helps users focus on the most important metrics.

04 Put it to work

Install kpi-dashboard-design in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add kpi-dashboard-design to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

Generic skills CLI form for plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md; the repository may document its own path.

Give the Skill a First Diagrams and Charts Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Design an executive SaaS metrics dashboard for [our company] that tracks monthly recurring revenue, customer churn rate, and LTV/CAC ratio. The dashboard needs to update weekly and show trends over the past 12 months with comparisons to our target goals. We've been getting conflicting MRR numbers between this dashboard and finance reports because annual subscriptions are normalized differently. Include the calculation methodology directly on each metric card and ensure the design works on mobile devices for our remote executive team.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Each KPI has an agreed definition, period, source and comparison baseline; reconcile conflicting numbers before presenting them.
  • If monthly retention is required, check that cohorts really use signup month; use another period only when it matches the analysis question.
  • Operational views distinguish infrastructure health from user-perceived quality.
  • Choose refresh cadence and aggregation for the actual workload, then test query cost.
  • Evaluate alerts against historical data and expected variation rather than treating the illustrative rolling-threshold formula as universally correct.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Seth Hobson
Repository
github.com/wshobson/agents Branch main
Skill file
plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md Content checksum recorded at verification; commit 4236bb9
License
MIT From LICENSE.
Repository stars
39,635 GitHub snapshot taken 2026-09-14 for the whole wshobson/agents repository, which contains 18 skills in this catalog. Not a rating or usage count for kpi-dashboard-design.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to Use This SkillLists six scenarios: executive dashboards, KPI selection, real-time monitoring, department views, layout improvements, metric governance
  2. Core ConceptsDefines KPI Framework with three levels, SMART KPIs criteria, and three-tier dashboard hierarchy structure
  3. Detailed worked examples and patternsPoints to references/details.md for common KPIs by department and deeper patterns
  4. Best PracticesFive do's (limit KPIs, show context, consistent colors, drilldown, appropriate updates) and five don'ts (vanity metrics, overcrowding, 3D charts, hidden methodology, ignoring mobile)
  5. TroubleshootingSolves five problems: MRR/finance conflicts, green infrastructure vs user complaints, flat cohorts, database hammering, alert fatigue
  6. Related SkillsLinks to data-storytelling skill for turning dashboard findings into executive narratives
The Skill's Own Description
“Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict each other due to inconsistent calculation methodology.”

Front-matter description from SKILL.md. The full file is about 5,423 characters. Read the full file on GitHub.

06 Before you install

Questions About the kpi-dashboard-design Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What if the dashboard shows healthy metrics but users are complaining?

The dashboard likely tracks infrastructure metrics like API uptime but not user-perceived quality. Add customer-perceived metrics like P95 page load time, task completion rate, and support ticket volume alongside infrastructure uptime and error rates. System health does not always reflect user experience.

KPI Dashboard Design

Run kpi-dashboard-design on a Real Diagrams and Charts Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design