refactor(viz-platform): extract skills and slim commands
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>
This commit is contained in:
70
plugins/viz-platform/skills/layout-templates.md
Normal file
70
plugins/viz-platform/skills/layout-templates.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user