USE THIS SKILL FIRST when user wants to create and design a dashboard, ESPECIALLY Vizro dashboards. This skill enforces a 3-step workflow (requirements, layout, visualization) that must be followed before implementation. For implementation and testing, use the dashboard-build skill after completing Steps 1-3.
npxskills add mckinsey/vizro--skill dashboard-designLoading…
Structured requirements → layout → visualization workflow.
Run Steps 1–3 in order; each step depends on the prior. Track progress:
Dashboard Development Progress:
- [ ] Step 1: Understand Requirements (define end user, dashboard goals, document decisions)
- [ ] Step 2: Design Layout & Interactions (wireframes, filter placement)
- [ ] Step 3: Select Visualizations (chart types, KPIs; colors only if user asked)
Interaction style: When gathering requirements or making design decisions, ask focused questions and present 2–5 numbered options so the user can choose quickly. Prefer using your client’s built-in multiple-choice or question UI to keep the interaction lightweight and clickable; if that isn’t available, use the same numbered format in plain text
Do not skip steps. Handle partial context as follows:
For simple dashboards (single page, less than 5 charts): Steps 1-3 can be abbreviated but not skipped entirely.
IMPORTANT: Each step produces a spec file in the spec/ directory to document reasoning, enable collaboration, and allow resumption in future sessions. Create the directory at project start.
spec/Goal: Define WHAT information is presented and WHY it matters.
Copy the template from assets/1_information_architecture.md to spec/1_information_architecture.md at the project root, fill in the placeholders, and save it BEFORE proceeding to Step 2.
Before proceeding to Step 2:
Detailed guidance: See information_architecture.md; Anti-patterns: See common_mistakes.md section "Step 1: Requirements Mistakes"
Goal: Define HOW users navigate and explore data.
Tier 1: Global Navigation
├── Multi-page sidebar (automatic in Vizro)
└── Page selection
Tier 2: Page-level Controls
└── Filters/Parameters in left collapsible sidebar
Tier 3: Component-level
├── Container-specific filters/parameters
├── Cross-filter, cross-highlight interactions
└── Export actions
Load the designing-vizro-layouts skill for grid system, component sizing, filter placement, and selector rules. Use the wireframe templates when building ASCII wireframes for user approval.
Beyond standard sidebar filters, Vizro supports advanced interactions where clicking a chart or table affects other components. Load the wiring-vizro-actions skill for the 6 named interaction patterns (Hierarchical Drill-Down, Single-Page Drill-Down, Comparison Spotlight, Multi-Dimensional Slice, Select & Explore, Data Export) with wireframes, spec entries, and code.
All advanced interactions follow Source → Control → Target: a source component (Graph or AgGrid — the components that carry click-data) sets an intermediate control (Filter or Parameter, always with an explicit id), which updates data-bearing target components (Graph, AgGrid, Figure, Table).
Decision flow — match data shape + user need to a pattern:
Hierarchy where detail needs its own page? → Pattern 1 (Hierarchical Drill-Down)
Hierarchy where detail fits in a container? → Pattern 2 (Single-Page Drill-Down)
Compare one entity vs many, keep context? → Pattern 3 (Comparison Spotlight)
2+ categorical dimensions, click one cell? → Pattern 4 (Multi-Dimensional Slice)
Users need to download data? → Pattern 5 (Data Export)
Otherwise → standard filters/parameters are sufficient
When NOT to use advanced interactions: view-only / executive dashboards, simple filtering needs (sidebar dropdown covers it), fewer than ~5 groups, or when you'd end up with more than 2 interaction patterns on a single page (becomes confusing).
For each interaction, document: source component, source value (column or "x"/"y"), control id + type (Filter/Parameter), targets, visibility (visible=False for highlight patterns), and whether it crosses pages (show_in_url=True). See the wiring-vizro-actions skill for full templates.
Copy the template from assets/2_interaction_ux.md to spec/2_interaction_ux.md at the project root, fill in the placeholders (including one ASCII wireframe per page), and save it BEFORE proceeding to Step 3. Delete the entire ## Interactions section if standard filters/parameters suffice.
Before proceeding to Step 3:
interactions: maps to a named pattern from wiring-vizro-actions (or the absence of interactions is intentional)Anti-patterns: See common_mistakes.md section "Step 2: Layout & Interaction Mistakes"
Goal: Choose appropriate chart types and establish visual consistency.
Load the selecting-vizro-charts skill for chart selection, color strategy, anti-patterns, and KPI card rules. Key design decisions:
## Colors section in the spec. Vizro assigns palettes automatically. Only include if the user explicitly requested custom colors in their message.kpi_card / kpi_card_reference; never rebuild as custom chartsCopy the template from assets/3_visual_design.md to spec/3_visual_design.md at the project root, fill in the placeholders, and save it BEFORE proceeding to implementation (dashboard-build skill). Do not add a ## Colors section unless the user explicitly asked for custom colors — Vizro assigns palettes automatically.
Before proceeding to implementation (dashboard-build skill):
## Colors section is absent unless the user explicitly requested custom colorsAnti-patterns: See common_mistakes.md section "Step 3: Visualization Mistakes"
| Reference | When to Load |
|---|---|
| information_architecture.md | Step 1: Deep dive on requirements |
| designing-vizro-layouts skill | Step 2: Grid system, component sizing, filters |
| wireframe_templates.md | Step 2: Wireframe templates and interaction labels |
| wiring-vizro-actions skill | Step 2: Cross-filter / cross-highlight / drill-through / export patterns |
| selecting-vizro-charts skill | Step 3: Chart types, anti-patterns |
| common_mistakes.md | All steps: Anti-patterns to avoid |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).