Does this skill handle the actual coding of the dashboard?

No, this skill is focused on design and architecture. After completing the 3 steps, you should use the 'dashboard-build' skill for implementation and testing.

What is the primary purpose of the dashboard-design skill?

It provides a structured 3-step workflow to plan, layout, and select visualizations for Vizro dashboards before any implementation code is written.

How does it handle grid layouts?

It uses a recommended 12-column grid strategy and provides specific row/column height guidelines optimized for the Vizro framework.

Can I skip the design steps for simple projects?

While the skill allows for abbreviated steps for simple dashboards (less than 5 charts), it strongly advises against skipping them entirely to maintain quality and documentation.

What documentation does this skill create?

The skill generates three specific YAML files in a 'spec/' directory: information architecture, interaction UX, and visual design specifications.

Vizro Dashboard Design

Name: Vizro Dashboard Design
Author: mckinsey

bymckinsey

•

3,561

•

デザインツール

Guides users through a structured 3-step framework to architect, layout, and select visualizations for high-quality Vizro data applications.

The dashboard-design skill is a specialized planning tool for the Vizro low-code framework. It enforces a rigorous design-first methodology that separates requirements gathering, layout architecture, and visualization selection from the implementation phase. By generating standardized YAML specification files at each step, it ensures that data apps are built with a clear purpose, logical grid structure, and effective visual communication. This skill is essential for developers looking to create professional-grade, user-centric dashboards while avoiding common UI/UX pitfalls in data visualization.

主な機能

01Validation checklists for each phase to ensure design consistency and technical feasibility.

02Enforced 3-step workflow: Requirements, Layout/Interactions, and Visualization Selection.

03Automated generation of YAML specification files for design documentation and persistence.

043,561 GitHub stars

05Standardized filter and selector placement strategies for better user experience.

06Expert guidance on Vizro's 12-column grid system and component sizing logic.

ユースケース

01Architecting complex multi-page business intelligence dashboards before writing code.

02Creating interactive wireframes and interaction flows for data-heavy applications.

03Standardizing data visualization choices and semantic color schemes across a development team.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mckinsey/vizro dashboard-design

For use in Claude.ai and ChatGPT

Download Skill