How do I install the Designing Vizro Layouts skill?

Run npx skillmds@latest add mckinsey/designing-vizro-layouts in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Designing Vizro Layouts safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Designing Vizro Layouts?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Designing Vizro Layouts free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Designing Vizro Layouts?

mckinsey (@mckinsey) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Designing Vizro Layouts by mckinsey

Name: Designing Vizro Layouts
Author: mckinsey

Designing Vizro Layouts

Use this skill when designing or building Vizro dashboard layouts — grid configuration, component sizing, filter/parameter placement, selector types, or container patterns. Activate when the user is creating wireframes, defining page structure, placing controls, or sizing charts.

mckinsey Updated Sep 17, 2026

File contents

Vizro Layout Guidelines

Core Rules

Use type: grid (not vm.Layout). Recommended: 12 columns, row_min_height: "140px".
Use -1 for empty cells. Every component must form a perfect rectangle in the grid.
Place 2–3 charts per row. Full-width only for time-series line charts.
Modifying existing layouts: Replicate the original structure and apply only the technical constraints below. See layout-guidelines.md for details.

Component Sizing (12-col grid, 140px rows)

Component	Columns	Rows	Height
KPI Card	2–3	1	140px
Small Chart	4	3	420px
Large Chart	6	4–5	560–700px
Table	12	4–6	560–840px

KPI cards: Place in the page Grid with equal columns and equal rows per card (e.g. 4 cards = 3 cols each). Use -1 for remaining empty cells. See layout-guidelines.md for the full KPI count lookup table and YAML examples. Charts need at least 2–3 rows to avoid looking squeezed.

Filter Placement

Page-level (left sidebar): filters shared across multiple components
Container-level (above container): filters scoped only to the components inside that container
Prefer Filters over Parameters. Do not set targets: by default — all components containing the specified column are automatically affected. Only set targets: when you want to limit which components are affected.

Selectors

Default: Just provide the column name to Filter or Parameter — Vizro auto-selects the appropriate selector based on the data type. Only override when the auto-selected selector doesn't fit:

Data type	Selector	Example
2–4 options	RadioItems	Region (N/S/E/W)
5+ options	Dropdown	Category (many)
Numeric range	RangeSlider	Price ($0–$1000)
Single number	Slider	Year (2020–2025)
Date	DatePicker	Order date
Multi-select	Checklist	Status (Active, etc.)

Deep Dive

Load layout-guidelines.md when you need: grid YAML examples (correct vs incorrect), flexible width distributions, container patterns (plain/filled/outlined), visual hierarchy principles, or Vizro platform constraints.

---name: designing-vizro-layoutsdescription: Use this skill when designing or building Vizro dashboard layouts — grid configuration, component sizing, filter/parameter placement, selector types, or container patterns. Activate when the user is creating wireframes, defining page structure, placing controls, or sizing charts.---# Vizro Layout Guidelines## Core Rules- Use `type: grid` (not `vm.Layout`). Recommended: **12 columns**, `row_min_height: "140px"`.- Use `-1` for empty cells. Every component must form a **perfect rectangle** in the grid.- Place 2–3 charts per row. Full-width only for time-series line charts.- **Modifying existing layouts**: Replicate the original structure and apply only the technical constraints below. See [layout-guidelines.md](references/layout-guidelines.md) for details.## Component Sizing (12-col grid, 140px rows)| Component | Columns | Rows | Height || ----------- | ------- | ---- | --------- || KPI Card | 2–3 | 1 | 140px || Small Chart | 4 | 3 | 420px || Large Chart | 6 | 4–5 | 560–700px || Table | 12 | 4–6 | 560–840px |**KPI cards**: Place in the page `Grid` with **equal columns and equal rows** per card (e.g. 4 cards = 3 cols each). Use `-1` for remaining empty cells. See [layout-guidelines.md](references/layout-guidelines.md) for the full KPI count lookup table and YAML examples. Charts need **at least 2–3 rows** to avoid looking squeezed.## Filter Placement- **Page-level** (left sidebar): filters shared across multiple components- **Container-level** (above container): filters scoped only to the components inside that container- Prefer Filters over Parameters. Do not set `targets:` by default — all components containing the specified column are automatically affected. Only set `targets:` when you want to limit which components are affected.## Selectors**Default**: Just provide the column name to `Filter` or `Parameter` — Vizro auto-selects the appropriate selector based on the data type. Only override when the auto-selected selector doesn't fit:| Data type | Selector | Example || ------------- | ----------- | --------------------- || 2–4 options | RadioItems | Region (N/S/E/W) || 5+ options | Dropdown | Category (many) || Numeric range | RangeSlider | Price ($0–$1000) || Single number | Slider | Year (2020–2025) || Date | DatePicker | Order date || Multi-select | Checklist | Status (Active, etc.) |## Deep DiveLoad [layout-guidelines.md](references/layout-guidelines.md) when you need: grid YAML examples (correct vs incorrect), flexible width distributions, container patterns (plain/filled/outlined), visual hierarchy principles, or Vizro platform constraints.

Frequently asked questions