lmiranda
5152cda161
Extract shared knowledge from 10 commands into 7 reusable skills: - mcp-tools-reference.md: All viz-platform MCP tool signatures - theming-system.md: Theme tokens, CSS variables, color palettes - accessibility-rules.md: WCAG contrast, color-blind safe palettes - dmc-components.md: DMC categories, validation, common props - responsive-design.md: Breakpoints, mobile-first, grid config - chart-types.md: Plotly chart types, export formats, resolution - layout-templates.md: Dashboard templates, filter types All commands now reference skills via "Skills to Load" section. Commands reduced from 1396 lines total to 427 lines (69% reduction). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
# Layout Templates
|
|
|
|
## Available Templates
|
|
|
|
### Basic
|
|
Single-column layout with header and content area.
|
|
```
|
|
+-----------------------------+
|
|
| Header |
|
|
+-----------------------------+
|
|
| |
|
|
| Content |
|
|
| |
|
|
+-----------------------------+
|
|
```
|
|
|
|
### Sidebar
|
|
Layout with collapsible sidebar navigation.
|
|
```
|
|
+--------+--------------------+
|
|
| | Header |
|
|
| Nav +--------------------+
|
|
| | |
|
|
| | Content |
|
|
| | |
|
|
+--------+--------------------+
|
|
```
|
|
|
|
### Tabs
|
|
Tabbed layout for multi-page dashboards.
|
|
```
|
|
+-----------------------------+
|
|
| Header |
|
|
+------+------+------+--------+
|
|
| Tab1 | Tab2 | Tab3 | |
|
|
+------+------+------+--------+
|
|
| |
|
|
| Tab Content |
|
|
| |
|
|
+-----------------------------+
|
|
```
|
|
|
|
### Split
|
|
Split-pane layout for comparisons.
|
|
```
|
|
+-----------------------------+
|
|
| Header |
|
|
+--------------+--------------+
|
|
| | |
|
|
| Left | Right |
|
|
| Pane | Pane |
|
|
| | |
|
|
+--------------+--------------+
|
|
```
|
|
|
|
## Filter Types
|
|
|
|
Available filter components:
|
|
- `dropdown` - Single/multi-select dropdown
|
|
- `date_range` - Date range picker
|
|
- `slider` - Numeric range slider
|
|
- `checkbox` - Checkbox group
|
|
- `search` - Text search input
|
|
|
|
## Output
|
|
|
|
Layout structures can be:
|
|
- Used with page tools to create full app
|
|
- Rendered as a Dash layout
|
|
- Combined with chart components
|