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.

1.38x

Quality

81%

Does it follow best practices?

Impact

94%

1.38x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Evaluation results

100%

34%

Sales Performance Dashboard Page

KPI card and grid layout

Criteria

Without context

With context

Grid type declaration

100%

12-column grid

100%

row_min_height set

100%

KPI equal column width

100%

KPI equal row height

100%

Empty cells use -1

100%

Grid rectangularity

100%

Chart row count

100%

Charts per row

100%

Full-width only for time-series

100%

KPIs at top

100%

Allowed components only

100%

89%

25%

Retail Analytics Dashboard — Interactive Controls

Filter placement and selector types

Criteria

Without context

With context

Shared filters at page level

100%

Section-specific filters in container

100%

Filters preferred over Parameters

100%

No default targets on shared filters

100%

Targets used only to restrict

25%

100%

Auto-selector not overridden unnecessarily

25%

50%

RadioItems for small categorical

100%

Dropdown for large categorical

100%

RangeSlider for numeric range

100%

Container variant specified

Parameters only for column switching

100%

Allowed actions only

100%

93%

17%

Migrate Legacy Dashboard Layout

Existing layout conversion

Criteria

Without context

With context

No vm.Layout usage

100%

type: grid present

100%

row_min_height applied

100%

12-column rows

100%

Original structure preserved

100%

66%

No layout redesign

100%

70%

Grid rectangularity

100%

Empty cells use -1

100%

Chart rows not squeezed

100%

KPI columns equal

100%

Allowed components only

100%

Repository: mckinsey/vizro
Commit: 124060f

Evaluated: 4 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Sales Performance Dashboard Page Retail Analytics Dashboard — Interactive Controls Migrate Legacy Dashboard Layout

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.