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:
2026-01-30 16:59:26 -05:00
parent 3437ece76e
commit 5152cda161
17 changed files with 770 additions and 1082 deletions

View File

@@ -4,18 +4,18 @@ description: Apply an existing theme to the current context
# Apply Theme
## Skills to Load
- skills/mcp-tools-reference.md
- skills/theming-system.md
## Visual Output
When executing this command, display the plugin header:
```
┌──────────────────────────────────────────────────────────────────┐
│ 🎨 VIZ-PLATFORM · Apply Theme
└──────────────────────────────────────────────────────────────────┘
+------------------------------------------------------------------+
| VIZ-PLATFORM - Apply Theme |
+------------------------------------------------------------------+
```
Then proceed with the theme activation.
Apply an existing theme to activate its design tokens.
## Usage
@@ -28,52 +28,16 @@ Apply an existing theme to activate its design tokens.
- `name` (required): Theme name to activate
## Examples
```
/theme dark
/theme corporate-blue
/theme my-custom-theme
```
## Tool Mapping
This command uses the `theme_activate` MCP tool:
```python
theme_activate(theme_name="dark")
theme_list() # List available themes
```
## Workflow
1. **User invokes**: `/theme dark`
2. **Tool activates**: Theme becomes active for subsequent operations
3. **Charts/layouts**: Automatically use active theme tokens
## Built-in Themes
| Theme | Description |
|-------|-------------|
| `light` | Mantine default light mode |
| `dark` | Mantine default dark mode |
## Listing Available Themes
To see all available themes:
```python
theme_list()
```
Returns both built-in and custom themes.
## Theme Effects
When a theme is activated:
- New charts inherit theme colors
- New layouts use theme spacing
- Components use theme typography
- Callbacks can read active theme tokens
When activated, new charts/layouts automatically use theme tokens.
## Related Commands