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 description that clearly identifies its niche (Vizro dashboard layouts) and provides explicit trigger guidance. Its main weakness is that the capabilities are described more as topic areas than concrete actions, and it uses second-person/imperative voice ('Use this skill', 'Activate when') rather than third-person declarative voice. The trigger terms are well-chosen and the 'when' clause is explicit and useful.
Suggestions
Rephrase capabilities 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.'
Convert the imperative 'Use this skill when...' and 'Activate when...' to a more standard format that still preserves the trigger guidance, e.g., 'Use when the user is creating wireframes, defining page structure, placing controls, or sizing charts in Vizro.'
| 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 skill is clearly scoped to Vizro dashboard layouts specifically, which is a distinct niche. The mention of 'Vizro' as a specific framework, combined with layout-specific terms like 'grid configuration' 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 progressive disclosure to a reference file. Its main weakness is the lack of inline executable YAML examples and the absence of a step-by-step workflow with validation checkpoints for building or modifying layouts. Adding a minimal complete YAML example and a brief sequential workflow would significantly improve actionability.
Suggestions
Add at least one complete, copy-paste-ready YAML grid example inline (e.g., a 12-column layout with 2 charts and KPI cards) to improve actionability.
Include a brief numbered workflow for building a layout from scratch (e.g., 1. Define grid dimensions, 2. Place components, 3. Verify rectangle constraint, 4. Add filters) with a validation step for the rectangle rule.
| 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 configuration snippets. | 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 are no validation checkpoints — e.g., verifying that all components form perfect rectangles or that filters are correctly scoped. | 2 / 3 |
Progressive Disclosure | Excellent structure with a concise overview in the main file and clear, well-signaled references to layout-guidelines.md for deeper content (YAML examples, container patterns, KPI lookup tables). References are one level deep and clearly described. | 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
27d4055
- 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.