plotly-dashboard-skill · git:20260807.4acaed9 · 2026-08-07 · sha256 2561b4a9f80c6a85

plotly-dashboard-skill git:20260807.4acaed9A

Immutable. This exact content is served forever at /api/v1/blob/2561b4a9f80c6a85.

---
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` |
| Copyable app patterns | See [EXAMPLES.md](EXAMPLES.md) |
| Runnable smoke app | [Runnable app](examples/app.py) |
| Definition of done | [QA checklist](QA_CHECKLIST.md) |

## 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

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

## Troubleshooting

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