Overview

Creates interactive dashboards with a single source of truth for UI and figure styling. Emphasizes consistent theming, clean layouts, and fast, focused callbacks to deliver production-ready apps.

How This Skill Works

Start by capturing audience needs, data constraints, and decisions. Then choose a layout pattern and a component library, define a theme and a Plotly figure template, and build the layout skeleton before coding callbacks. Implement callbacks with clear inputs and outputs, and optimize slow paths with caching or pre-aggregation.

When to Use It

• You're building a layout-first dashboard where the UI communicates hierarchy (layout-first workflow).
• You need consistent theming and a shared figure template across charts.
• You have slow callbacks and need caching or pre-aggregation to speed up interactivity.
• You're delivering a production-ready app scaffold with a robust layout and callback structure.
• You're aligning audience, data sources, filters, and deployment constraints early in the project.

Quick Start

1. Step 1: Capture audience, decisions, data sources, and update cadence.
2. Step 2: Pick a layout pattern and define a theme + Plotly figure template.
3. Step 3: Build the layout skeleton, wire up callbacks with clear inputs/outputs, and optimize slow paths.

Best Practices

• Capture audience and decision criteria upfront (audience, data constraints, update cadence).
• Pick a layout pattern and a component library to standardize UI across charts.
• Define a theme and Plotly figure template to ensure visual consistency.
• Build the layout skeleton before implementing callbacks to avoid rework.
• Keep callbacks small and focused; optimize slow paths with caching or pre-aggregation.

Example Use Cases

• Example 1: Layout-first workflow—Header + filters + KPI row + primary trends + breakdown table.
• Produce a production-ready Dash scaffold with a clear layout and defined callbacks.
• Apply consistent theming across charts via a defined theme and Plotly figure templates.
• Coordinate styling with style references (STYLE_GUIDE.md and FIGURE_STYLE.md) for uniform visuals.
• Address performance early by caching expensive steps to reduce callback latency.

Frequently Asked Questions