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

Quality

Content

72%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured, concise skill that efficiently communicates Vizro layout rules, component sizing, filter placement, and selector selection. Its main weakness is the lack of inline executable YAML examples — the concrete grid configuration examples are deferred entirely to the reference file, which reduces immediate actionability. Adding one small complete YAML example and a brief step-by-step layout construction workflow would elevate this skill significantly.

Suggestions

Add one complete, minimal YAML grid example inline (e.g., a 2-chart layout with a KPI row) so the skill is immediately actionable without loading the reference file.

Add a brief numbered workflow for constructing a layout from scratch (e.g., 1. Define grid dimensions, 2. Place components as rectangles, 3. Verify all components form perfect rectangles, 4. Add filters), including a validation checkpoint for grid correctness.

Dimension	Reasoning	Score
Conciseness	The content is lean and efficient. It uses tables for structured data, avoids explaining what Vizro is or how grids work conceptually, and every section delivers specific, actionable information without padding.	3 / 3
Actionability	Provides concrete sizing tables, selector mappings, and specific rules (12 columns, 140px rows, -1 for empty cells), but lacks executable YAML/code examples directly in the skill body. The actual grid YAML examples are deferred to the reference file.	2 / 3
Workflow Clarity	The skill covers layout design decisions clearly but doesn't provide an explicit step-by-step workflow for building a layout from scratch. The 'Modifying existing layouts' note is helpful but brief. There are no validation checkpoints for verifying grid rectangularity or correctness.	2 / 3
Progressive Disclosure	The skill provides a clear, concise overview with well-signaled references to layout-guidelines.md for deeper content (YAML examples, container patterns, KPI lookup tables). References are one level deep and clearly indicate what additional content they contain.	3 / 3
	Total	10 / 12 Passed

Description

89%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

This is a solid skill description that clearly identifies its niche (Vizro dashboard layouts) and provides explicit trigger conditions. The main weakness is that the capabilities are described more as topic areas than concrete actions, and the description uses second-person framing ('Use this skill when') which is directed at Claude rather than describing capabilities in third person, though this is a minor stylistic issue. The trigger terms are well-chosen and the 'when' clause is explicit and useful.

Suggestions

Reframe capability areas as concrete actions in third person, e.g., 'Designs Vizro dashboard layouts, configures grid systems, sizes components, places filters and parameters, selects control types, and structures container patterns.'

Dimension	Reasoning	Score
Specificity	The description names the domain (Vizro dashboard layouts) and lists several relevant areas (grid configuration, component sizing, filter/parameter placement, selector types, container patterns), but these read more as topic areas than concrete actions. It doesn't list specific operations like 'create grid layouts', 'configure selectors', or 'define responsive breakpoints'.	2 / 3
Completeness	The description clearly answers both 'what' (designing/building Vizro dashboard layouts with grid configuration, component sizing, etc.) and 'when' ('Activate when the user is creating wireframes, defining page structure, placing controls, or sizing charts'). It has explicit trigger guidance.	3 / 3
Trigger Term Quality	Good coverage of natural terms a user would say: 'Vizro', 'dashboard', 'grid', 'component sizing', 'filter', 'parameter', 'selector', 'wireframes', 'page structure', 'controls', 'charts'. These are terms users would naturally use when working on Vizro dashboards.	3 / 3
Distinctiveness Conflict Risk	The description is clearly scoped to Vizro dashboard layouts specifically, which is a distinct niche. The combination of 'Vizro' with layout-specific terms like 'grid configuration', 'selector types', and 'container patterns' makes it unlikely to conflict with general dashboard or web layout skills.	3 / 3
	Total	11 / 12 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: mckinsey/vizro
Commit: e1cf317

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

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.