From vizro-e2e-flow
Builds and tests Vizro dashboards from design specs by copying example app, fetching model schemas, and running Playwright tests. For Python-based dashboard implementation.
npx claudepluginhub mckinsey/vizro --plugin vizro-e2e-flowThis skill uses the workspace's default tool permissions.
Requires Phase 1 spec files from the **dashboard-design** skill: `spec/1_information_architecture.yaml`, `spec/2_interaction_ux.yaml`, and `spec/3_visual_design.yaml`. If these do not exist, ask the user whether to run Phase 1 first or proceed without specs.
Guides dashboard design via 3-step workflow: requirements, layout, visualizations. For Vizro; generates YAML specs. Activates on design/plan requests before building.
Generates self-contained interactive HTML dashboards with KPI cards, charts, filters, and tables from queries, CSVs, or samples for reports and monitoring.
Designs analytical dashboard specs: defines questions each chart answers, writes SQL queries, specifies layout and refresh cadence. For dashboard build requests.
Share bugs, ideas, or general feedback.
Requires Phase 1 spec files from the dashboard-design skill: spec/1_information_architecture.yaml, spec/2_interaction_ux.yaml, and spec/3_visual_design.yaml. If these do not exist, ask the user whether to run Phase 1 first or proceed without specs.
app.py you will create, with uv run <script_name>.py or uv run app.py - this will ensure you use the correct dependencies and versions.sleep, echo, or anything else) in the terminal where the dashboard app is running, even if you started it with isBackground=true. This WILL kill the dashboard process. The dashboard startup takes time - be patient and let it run undisturbed.IMPORTANT: Each step produces a spec file in the spec/ directory to document reasoning, enable collaboration, and allow resumption in future sessions. Create the spec/ directory if it is not already present at the root of the project.
uv run ./scripts/get_model_json_schema.py <model_name> <model_name2> ... where <model_name> is the name of the model you want to get the schema for (prints the full JSON schema for each model to stdout). You can get an overview of what is available by calling the overview script like so: uv run ./scripts/get_overview_vizro_models.py (prints all available model names with one-line descriptions to stdout).Graph model in your dashboard app.uv run <your_dashboard_app>.py CRITICAL: After running this command, DO NOT run ANY other commands in that terminal. The dashboard takes time to start up (sometimes 10-30 seconds)sleep in it. Fix any warnings and even more important errors you encounter. ONLY once you see the dashboard running, inform the user. NEVER run any commands in that terminal after starting the dashboard.spec/3_visual_design.yaml defines color_decisions. For AG Grid cell styling (conditional formatting, heatmaps), use from vizro.themes import palettes, colors — never invent hex values. See selecting-vizro-charts skill.kpi_card / kpi_card_reference in Figure model only. Never rebuild as custom charts (exception: dynamic text). See selecting-vizro-charts skill.Save this file BEFORE proceeding to Step 2:
# spec/4_implementation.yaml
implementation:
app_file: <name>.py
data_files:
- [list of data files used]
data_type: static/dynamic # static for DataFrames, dynamic for data_manager functions
data_sources:
- name: [data source name]
type: csv/database/api/function
caching: true/false
refresh_strategy: [if dynamic: cache timeout or refresh trigger]
spec_compliance:
followed_specs: true/false
deviations:
- spec_item: [What was specified]
actual: [What was implemented]
reason: [Why the deviation was necessary]
custom_charts:
- name: [Function name]
purpose: [What it does]
Before proceeding to Step 2, verify against spec files:
spec/1_information_architecture.yaml, spec/2_interaction_ux.yaml and spec/3_visual_design.yaml are implemented if specs existspec/4_implementation.yamlThis requires a Playwright MCP server. If not available, inform the user and skip this step. Look for Playwright-related tools in your available MCP tools (naming varies by client).
When conducting the below tests, feel free to go back to Step 1 to fix any issues you find, then come back here.
Use your Playwright MCP tools to navigate to http://localhost:8050, click through each page, and check the browser console for errors.
Important things to check:
Save this file to complete the project:
# spec/5_test_report.yaml
testing:
launch:
successful: true/false
url: http://localhost:8050
errors: []
navigation:
all_pages_work: true/false
issues: []
console:
no_errors: true/false
errors_found: []
screenshot_tests:
performed: true/false
pages_tested: []
discrepancies:
- page: [Page name]
issue: [Description of visual issue]
fixed: true/false
notes: [Fix details or reason not fixed]
requirements_met: true/false
dashboard_ready: true/false
spec/ directory| Reference | When to Load |
|---|---|
| selecting-vizro-charts skill | Colors, KPI cards, custom charts, Plotly conventions |
| writing-vizro-yaml skill | YAML syntax, component patterns, data_manager, pitfalls |
| data_management.md | Static vs dynamic data, caching, databases, APIs |
| custom_charts_guide.md | Implementing custom @capture("graph") charts |
| example_app.py | Starting template for dashboard implementation |