# Plotly Dashboard Skill

> Build production-ready Plotly Dash dashboards with consistent theming, clear layouts, and performant callbacks. Use when this capability is needed.

- Skill: `tomevault-io/plotly-dashboard-skill` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/plotly-dashboard-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/plotly-dashboard-skill/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/plotly-dashboard-skill

---


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

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

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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/fmschulz) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->