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.
86
81%
Does it follow best practices?
Impact
94%
1.38xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
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 with clear 'when' triggers and good domain specificity around Vizro dashboards. The main weakness is that the capabilities are described more as topic areas than concrete actions (e.g., 'grid configuration' rather than 'configure grid layouts'). The description also uses second-person framing ('Use this skill when') which is acceptable as trigger guidance, though the capability portion could benefit from more action-oriented third-person verbs.
Suggestions
Rewrite capability phrases as concrete actions in third person: e.g., 'Configures grid layouts, sizes components, places filters and parameters, selects control types, and defines container patterns for Vizro dashboards.'
| 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 explicitly 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'). Both clauses are present and explicit. | 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 working with Vizro dashboards would naturally use. | 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 |
Implementation
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 with good use of tables and clear references to deeper material. Its main weakness is the lack of inline executable YAML examples and a step-by-step workflow for constructing a layout, which would make it more immediately actionable.
Suggestions
Add at least one complete, executable YAML grid example inline (e.g., a 12-column layout with 2 charts and KPI cards) to improve actionability without requiring the reference file.
Add a brief numbered workflow (e.g., 1. Define grid dimensions → 2. Place components as rectangles → 3. Verify no overlaps → 4. Add filters) with a validation step for grid rectangle correctness.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every token earns its place. No unnecessary explanations of what Vizro is or how grids work conceptually. The tables are dense and informative, and the content assumes Claude understands layout concepts. | 3 / 3 |
Actionability | Provides concrete sizing values, selector mappings, and clear rules, but lacks executable YAML/code examples directly in the skill. The actual grid YAML examples are deferred to the reference file, leaving the main skill without copy-paste-ready configurations. | 2 / 3 |
Workflow Clarity | The skill covers what to do (sizing, placement, selectors) but doesn't provide a clear sequential workflow for building a layout from scratch. There's no step-by-step process or validation checkpoints for verifying grid rectangularity or correct filter placement. | 2 / 3 |
Progressive Disclosure | Excellent structure with a concise overview and well-signaled one-level-deep references to layout-guidelines.md. The 'Deep Dive' section clearly lists what the reference file contains, making navigation easy. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
100%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
124060f
- Reviewed
Table of Contents
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.