plotly-dashboard-skill

name	plotly-dashboard-skill
description	Build production-ready Plotly Dash dashboards. Use when scientific data needs an interactive, consistently themed layout with clear and performant callbacks.

Plotly Dashboard Skill

Create interactive dashboards with a single source of truth for UI and figure styling.

Instructions

1. Capture audience, questions, and data constraints.
2. Pick a layout pattern and component library.
3. Define a theme and Plotly figure template.
4. Build the layout skeleton before callbacks.
5. Implement callbacks with clear inputs/outputs.
6. Optimize slow callbacks with caching or pre-aggregation.

Quick Reference

Task	Action
UI style guide	See STYLE_GUIDE.md
Figure template	See FIGURE_STYLE.md
Palettes	See PALETTES.md
App architecture	See DASH_ARCHITECTURE.md
Performance	See PERFORMANCE.md
Runnable smoke app	Runnable app
Definition of done	QA checklist

Input Requirements

• Audience and key decisions
• Data sources and update cadence
• Required filters and views
• Deployment constraints

Output

• Dash app scaffold (layout + callbacks)
• Consistent theming and figure templates
• README with usage notes

Quality Gates

• Layout communicates hierarchy and intent
• Callbacks are small and focused
• p95 interaction latency acceptable
• Styling is consistent across charts
• uv run --script examples/app.py --smoke returns HTTP 200 and its measured pure-callback p95 is within the declared latency budget (300 ms by default).

Examples

Example 1: Layout-first workflow

Header + filters + KPI row + primary trends + breakdown table

Troubleshooting

Issue: Slow callbacks Solution: Cache expensive steps or pre-aggregate data.