dashboard-build_skill

Overview

This skill builds and tests a dashboard or simple data-visualization app as Phase 2 of the end-to-end process. It focuses on implementing the app, wiring data sources, adding custom charts when needed, and producing the required spec artifacts for reproducibility. Use this after requirements and design work from the dashboard-design phase.

How this skill works

I start by copying the provided example app and modifying it to match the design spec. I fetch Vizro model schemas with the provided scripts, wire static or dynamic data sources, add custom charts when Plotly Express is insufficient, then run the app with the recommended runtime command. I document every decision in spec/4_implementation.yaml and, if testing is available, produce spec/5_test_report.yaml after running the Playwright checks.

When to use it

• You have completed Phase 1 (requirements, layouts, visual choices) or accept a quick design check before building.
• You need a reproducible dashboard implementation with documented decisions and spec files.
• You must integrate CSVs, databases, APIs, or data_manager functions into a Vizro app.
• You require custom Plotly charts not achievable with Plotly Express.
• You want automated or manual end-to-end UI testing when Playwright MCP is available.

Best practices

• Always start by copying ./references/example_app.py and modify it—never build from scratch.
• Run ./scripts/get_model_json_schema.py for any Vizro models you use and inspect schemas before coding.
• Execute apps and scripts with: uv run <script>.py or uv run app.py to ensure correct deps.
• Create or update spec/4_implementation.yaml before proceeding to testing; document all deviations.
• Never type any commands in the terminal where the dashboard is running; let the process start and reload undisturbed.
• Use built-in kpi_card and kpi_card_reference for KPIs; only use custom charts when strictly needed.

Example use cases

• Implementing a multi-page sales dashboard from Phase 1 wireframes and CSV exports.
• Replacing a prototype with a production-ready Vizro app that uses a database and caching strategy.
• Adding a custom interactive chart when Plotly Express cannot express the required aggregation or interaction.
• Running automated Playwright checks to validate navigation, console logs, and visual diffs (when MCP is present).