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.

주요 기능

Validation checklists for each phase to ensure design consistency and technical feasibility.
Enforced 3-step workflow: Requirements, Layout/Interactions, and Visualization Selection.
Automated generation of YAML specification files for design documentation and persistence.
3,561 GitHub stars
Standardized filter and selector placement strategies for better user experience.
Expert guidance on Vizro's 12-column grid system and component sizing logic.

사용 사례

Architecting complex multi-page business intelligence dashboards before writing code.
Creating interactive wireframes and interaction flows for data-heavy applications.
Standardizing data visualization choices and semantic color schemes across a development team.

소개

주요 기능

Validation checklists for each phase to ensure design consistency and technical feasibility.
Enforced 3-step workflow: Requirements, Layout/Interactions, and Visualization Selection.
Automated generation of YAML specification files for design documentation and persistence.
3,561 GitHub stars
Standardized filter and selector placement strategies for better user experience.
Expert guidance on Vizro's 12-column grid system and component sizing logic.

사용 사례

Architecting complex multi-page business intelligence dashboards before writing code.
Creating interactive wireframes and interaction flows for data-heavy applications.
Standardizing data visualization choices and semantic color schemes across a development team.