// Use this skill when writing or debugging Vizro YAML dashboard configurations — component syntax, data_manager registration, custom function wiring, filter/parameter setup, or AG Grid tables. Activate when the user is building a Vizro app, encountering YAML or runtime errors, or asking about Vizro component patterns.
Use this skill to build, implement, and test Vizro dashboards (Phase 2). Activate when the user wants to create a working app, says "just build it", or has data ready for implementation. Requires spec files from the dashboard-design skill (Phase 1), or user confirmation to skip design.
Use this skill first when the user wants to design or plan a dashboard, especially Vizro dashboards. Enforces a 3-step workflow (requirements, layout, visualization) before implementation. Activate when the user asks to create, design, or plan a dashboard. For implementation, use the dashboard-build skill after completing Steps 1-3.
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.
Use this skill when adding cross-filter, cross-highlight, drill-through, or data export interactions to a Vizro dashboard — both for choosing the right interaction pattern during design and for implementing actions in code. Activate when the user wants clicks on a chart or table to filter or highlight other charts, tables, or figures, needs cross-page navigation with pre-set filters, or wants users to download data.
Use this skill when choosing chart types, applying Plotly Express conventions, configuring colors, or building KPI cards for Vizro dashboards. Activate when the user asks which chart fits their data, needs custom chart functions, wants to set colors or palettes, or is creating KPI metric cards.
| name | writing-vizro-yaml |
| description | Use this skill when writing or debugging Vizro YAML dashboard configurations — component syntax, data_manager registration, custom function wiring, filter/parameter setup, or AG Grid tables. Activate when the user is building a Vizro app, encountering YAML or runtime errors, or asking about Vizro component patterns. |
Each mistake below is expanded with code examples and fixes in yaml-reference.md.
@capture("graph") receives a DataFrame — use data_frame directly; never re-lookup via data_manager[data_frame] (causes blank charts).data_manager is not subscriptable — pre-process on raw DataFrame, then register._target_ needs module prefix — _target_: custom_charts.my_chart, not _target_: my_chart.type: figure has no title field — KPI titles go in _target_: kpi_card args.type: ag_grid requires _target_: dash_ag_grid."component_id.argument_name", not "component_id.figure".column: "Version #" (unquoted # starts a comment).targets: — omit when you want to apply it to all components on the page whose data source includes defined filter column.# Standard chart (scatter — no aggregation needed, each row is one point)
- figure:
_target_: scatter
data_frame: sales_data
x: units
y: revenue
type: graph
title: Revenue vs Units
# KPI card (title inside figure args, NOT on component)
- figure:
_target_: kpi_card
data_frame: kpi_data
value_column: Revenue
title: Total Revenue
value_format: "${value:,.0f}"
type: figure
# AG Grid table
- figure:
_target_: dash_ag_grid
data_frame: sales_data
type: ag_grid
title: Sales Data
# Filter with targets
controls:
- column: region
targets: [chart_1, chart_2]
type: filter
import vizro.models as vm
from vizro import Vizro
import vizro.plotly.express as px
from vizro.tables import dash_ag_grid
from vizro.figures import kpi_card, kpi_card_reference
from vizro.models.types import capture
from vizro.managers import data_manager
from vizro.themes import palettes, colors
Load yaml-reference.md when you need expanded guidance. Key sections to search for:
| Need | Search for |
|---|---|
| App structure | ## End-to-End Data Flow |
| Data registration | ## Data Registration |
| Custom charts | ## Custom Charts |
| AG Grid (heatmap, inline bars) | ## AG Grid Tables |
| Containers / Tabs | ## Containers or ## Tabs |
| Expanded mistake fixes | ## Critical Mistakes |