Dashboard Design

Dashboard Design

Staleness Watch: See EXTERNAL-API-REGISTRY.md for source URLs and recheck cadence

Overview

Design dashboards that tell stories through layout. A dashboard is not a collection of charts -- it's a guided reading experience where position, size, and interaction design control what the viewer understands and in what order.

The cardinal rule: reading order = story order. KPIs answer "what?", charts answer "why?", tables answer "how much?", and drill-downs answer "show me more."

Module 1: Layout Patterns

Reference Pattern: Inverted Pyramid (from population.html)

┌────────────────────────────────────────────────────┐
│ HEADER: Title + subtitle + badge                   │
├────────────────────────────────────────────────────┤
│ KPI ROW: 3-6 cards (auto-fit grid)                 │
├────────────────────────────────────────────────────┤
│ CONTROLS: Search + filter buttons                  │
├────────────────────────────────────────────────────┤
│ HERO CHART: Full-width, clickable                  │
├───────────────────────┬────────────────────────────┤
│ SUPPORTING CHART 1    │ SUPPORTING CHART 2         │
├───────────────────────┴────────────────────────────┤
│ DATA TABLE: Sortable, ranked, inline indicators    │
├────────────────────────────────────────────────────┤
│ FOOTER: Data source + attribution + last updated   │
└────────────────────────────────────────────────────┘

         ┌── DRILL-DOWN MODAL ──┐
         │ Detail stats grid     │
         │ Horizontal bar        │
         │ Detail table          │
         └───────────────────────┘

Module 2: KPI Card Design

Each KPI card follows the metric + delta + context pattern:

KPI Selection Rules

Module 3: Filter Architecture

Filter Design Rules

1. Global filters visible at all times (sticky if page scrolls) 2. Active filter state clearly indicated (colored buttons, badges) 3. "All" or "Reset" always available as first option 4. Filter changes animate smoothly (transition: 300ms) 5. Filter state reflected in chart titles or subtitles

Module 4: Narrative Flow

The dashboard tells a story through panel arrangement:

Progressive Disclosure

• Above the fold: KPIs + hero chart (must convey the main story without scrolling)
• Below the fold: Supporting views + table (deeper evidence)
• On demand: Drill-down modals, tooltips, expandable rows

Module 5: Self-Contained HTML Pattern

Every dashboard outputs as a single HTML file:

CSS Custom Properties Template

:root {
  --bg-primary: #0f0f23;
  --bg-card: #1a1a2e;
  --text-primary: #e8e8f0;
  --text-secondary: #888;
  --accent-1: #6366f1;
  --accent-2: #3b82f6;
  --accent-3: #10b981;
  --accent-4: #f59e0b;
  --accent-5: #ec4899;
  --border-radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --transition: 0.3s ease;
}

Module 6: Platform Targets

Default to HTML unless the user specifies otherwise.

Module 7: Chart Grid Pattern (from visuals.html)

For dashboards that showcase multiple chart types or let users explore:

Module 8: Interaction Patterns

Module 9: 5-Visual Rule (VT BIT 5424)

Executive dashboards follow the 5-Visual Rule:

1. 1 KPI row (3-6 metric cards) 2. 1 hero chart (the main story) 3. 2 supporting charts (different lenses on same data) 4. 1 data table (detail on demand)

Maximum 5 visual elements above the fold. More than 5 creates cognitive overload for executive audiences. Analysts get more through drill-down, not more panels.

Anti-Patterns

dashboard-design

Dashboard layout patterns, KPI card design, filter architecture, narrative flow through panels, and self-contained HTML generation

Quick Facts

Installation

From ACT Edition:

/mall install dashboard-design

Or manually copy the plugin contents to .github/skills/local/dashboard-design/.

Artifacts

• skill: SKILL.md

Shape: .S..

Skill only -- domain knowledge loaded when pattern matches.