Designing Dashboards

Dashboard Design Skill

A collaborative partner for creating modern, actionable dashboards. Never assume—always ask.

How This Skill Works

This skill uses progressive disclosure. The core workflow and principles are here; detailed guidance is in reference files loaded when needed.

At each phase, consult the relevant reference file:

Additional detailed references:

• chart-selection.md — Comprehensive chart type guide
• design-tokens.md — CSS design token system
• requirements-questions.md — Complete question library

Validation Checkpoints (Always Complete)

These checkpoints should always be triggered. Skipping them leads to issues caught late and rework.

Five Modern Dashboard Principles

Every dashboard embodies these principles:

1. Charts + Insights (Not Just Charts)

WRONG: Chart with only a title
RIGHT: Chart with insight: "APAC drove 60% of growth, up 34% YoY"

Every visualization includes headline insights, context, and annotations.

2. Appropriate Chart Variety

WRONG: Default to bar/line for everything
RIGHT: Match chart type to data:
  - Conversion data → Funnel chart
  - Multi-attribute comparison → Radar chart
  - Time × category patterns → Heatmap
  - Flow between categories → Sankey diagram

3. Creative Layouts (Not Just Card Grids)

WRONG: Always "4 KPIs, 2 charts, 1 table"
RIGHT: Consider the story:
  - Hero layout: Large focal visualization
  - Magazine layout: Narrative flow
  - Hub & spoke: Central KPI with breakdowns
  - Bento box: Mixed-size visual variety

4. Actionable Dashboards (Not Dead Ends)

WRONG: Static display only
RIGHT: Every widget answers "What can I do next?"
  - Primary CTA: "View Details →"
  - Drill-down paths: Click region → see breakdown
  - Quick actions: "Export", "Share", "Investigate"

5. Complete Widget Specifications

WRONG: "Put a line chart here"
RIGHT: Chart + Title + Insight + Legend + Context + CTA + States

Decision Classification

Before proceeding with ANY aspect, classify decisions:

Must Ask (User Preference Required)

• Visual theme (dark/light/brand colors)
• Design aesthetic (minimal, data-dense, modern, corporate)
• Color palette preferences
• Typography preferences
• Layout density preference
• Metric prioritization

Should Ask (Offer Options)

• Dashboard type classification (confirm recommendation)
• Layout structure options
• Chart type alternatives
• Mobile/responsive strategy

Can Decide (Best Practice Applies)

• Accessibility compliance (always WCAG 2.1 AA)
• Data-ink ratio principles
• Contrast ratios
• Grid alignment

Collaboration Workflow

Checkpoint 1: Initial Analysis

When user makes request, I:

1. Acknowledge the request
2. Identify what's clear vs. unclear
3. List decisions needing user input
4. Ask targeted questions

Reference: requirements.md for question sequences and conversation patterns.

"I'd be happy to help! Based on your request, I understand:
✓ [What's clear]
? I need to clarify:

1. **Visual Direction**: Clean/minimal, data-dense, modern, or corporate?
2. **Theme**: Light mode, dark mode, or both?
3. **Top Priorities**: Which 1-2 metrics are most critical?"

Checkpoint 2: Requirements Confirmation

Before moving to strategy:

Reference: requirements.md for complete checklist.

"Here's what I've gathered:
[Requirements summary]

**Functional**: Purpose, users, metrics, comparisons
**Visual**: Theme, aesthetic, brand, density

Does this accurately capture your needs?"

Checkpoint 3: Strategy Proposal

Before moving to design:

Reference: strategy.md for type classification and prioritization.

"Based on your requirements, here's my recommended approach:

**Dashboard Type**: [Type] — because [reasoning]
**Metric Priority**:
1. [Critical] — Top-left, largest display
2. [Important] — Top-right
3. [Supporting] — Lower sections

Does this align with your vision?"

Checkpoint 4: Design Options

Present visual options before finalizing:

References:

• information-architecture.md — Layout patterns
• visualization.md — Chart selection
• visual-design.md — Aesthetics
• components.md — Widget specifications

"For the visual design, I have options:

**Layout Pattern Options:**
A) Hero Layout — Large focal visualization
B) Bento Box — Mixed-size cards
C) Magazine — Narrative flow
D) Hub & Spoke — Central KPI with breakdowns

**Chart Style Options:**
A) Insightful (charts with headlines and context)
B) Minimal (clean, essential data only)
C) Detailed (annotations, reference lines)

Which combination appeals to you?"

Checkpoint 5: Conceptual Design Validation

Before implementation, validate the design against checklists:

References:

• validation.md — Conceptual validation checklist
• visualization.md — Data-appropriate visualization check
• components.md — Widget checklist and density guidelines

"Before I implement, let me validate the design:

**Widget Checklist (Theoretical Pass):**
✓ Each widget has: title, insight, visual, context, CTA, states
✓ Data-appropriate visualization check completed
✓ Layout density reviewed against anti-patterns
✓ All required elements accounted for

**Design Validation:**
- Chart types match data characteristics
- Widgets won't be cramped at target sizes
- Visual hierarchy is clear

Does this design direction look correct before I proceed with implementation?"

This is a conceptual/checklist review — you're validating the PLAN, not the rendered output.

Checkpoint 6: Visual Testing & Delivery

After implementation is complete, view the dashboard in browser:

Reference: validation.md for visual testing checklist.

"Now that implementation is complete, I'll review the rendered output:

**Visual Testing:**
✓ Viewed at intended viewport size
✓ Overall visual balance and breathing room verified
✓ Each widget checked against density guidelines
✓ Visualizations differentiate actual data values
✓ User flow walked through end-to-end
✓ Edge states tested with real-world scenarios

**What I implemented:**
- [Key decision 1]: [What was chosen]
- [Key decision 2]: [What was chosen]

**Final Verification:**
✓ Requirements met
✓ Visual preferences honored
✓ Accessibility compliant
✓ Edge states working

What would you like to adjust?"

Review the complete dashboard first, then check each widget within it.

Anti-Patterns to Avoid

Layout Anti-Patterns

• Always defaulting to "4 KPIs + 2 charts + table"
• Every widget same size in a grid
• Metrics crammed into top row without breathing room

Chart Anti-Patterns

• Using bar charts for everything
• Chart with only a title, no insight text
• Plain chart without comparison context

Actionability Anti-Patterns

• Dashboard as dead-end display
• "View Details" as only generic action
• No drill-down paths

Widget Anti-Patterns

• Missing legends on multi-series charts
• No loading/empty/error states
• Incomplete specifications

Process Anti-Patterns

• Applying visual defaults without mentioning them
• Skipping straight to execution on subjective choices
• Assuming user wants "best practices" over their preferences
• Proceeding without confirming understanding

Quick Reference: When to Use Each File

Output Templates

Requirements Document

See requirements.md for complete template.

Strategic Brief

See strategy.md for complete template.

Widget Specification

See components.md for complete template.

Validation Report

See validation.md for complete template.