lmiranda
20458add3f
Sprint 1 - viz-platform Plugin completed (13/13 issues): - Commands: 7 files (initial-setup, chart, dashboard, theme, theme-new, theme-css, component) - Agents: 3 files (theme-setup, layout-builder, component-check) - Documentation: README.md, claude-md-integration.md - Tests: 94 tests passing (68-99% coverage) - CHANGELOG updated with completion status Closes: #178, #179, #180, #181, #182 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
116 lines
3.7 KiB
Markdown
116 lines
3.7 KiB
Markdown
---
|
|
description: Create a dashboard layout with the layout-builder agent
|
|
---
|
|
|
|
# Create Dashboard
|
|
|
|
Create a dashboard layout structure with filters, grids, and sections.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/dashboard {template}
|
|
```
|
|
|
|
## Arguments
|
|
|
|
- `template` (optional): Layout template - one of: basic, sidebar, tabs, split
|
|
|
|
## Examples
|
|
|
|
```
|
|
/dashboard # Interactive layout builder
|
|
/dashboard basic # Simple single-column layout
|
|
/dashboard sidebar # Layout with sidebar navigation
|
|
/dashboard tabs # Tabbed multi-page layout
|
|
/dashboard split # Split-pane layout
|
|
```
|
|
|
|
## Agent Mapping
|
|
|
|
This command activates the **layout-builder** agent which orchestrates multiple tools:
|
|
|
|
1. `layout_create` - Create the base layout structure
|
|
2. `layout_add_filter` - Add filter components (dropdowns, date pickers)
|
|
3. `layout_set_grid` - Configure responsive grid settings
|
|
4. `layout_add_section` - Add content sections
|
|
|
|
## Workflow
|
|
|
|
1. **User invokes**: `/dashboard sidebar`
|
|
2. **Agent asks**: What is the dashboard purpose?
|
|
3. **Agent asks**: What filters are needed?
|
|
4. **Agent creates**: Base layout with `layout_create`
|
|
5. **Agent adds**: Filters with `layout_add_filter`
|
|
6. **Agent configures**: Grid with `layout_set_grid`
|
|
7. **Agent returns**: Complete layout structure
|
|
|
|
## 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
|
|
|
|
Returns a layout structure that can be:
|
|
- Used with page tools to create full app
|
|
- Rendered as a Dash layout
|
|
- Combined with chart components
|