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: Create a new custom theme with design tokens
# Create New 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 · New Theme
└──────────────────────────────────────────────────────────────────┘
+------------------------------------------------------------------+
| VIZ-PLATFORM - New Theme |
+------------------------------------------------------------------+
```
Then proceed with the theme creation.
Create a new custom theme with specified design tokens.
## Usage
@@ -28,99 +28,11 @@ Create a new custom theme with specified design tokens.
- `name` (required): Name for the new theme
## Examples
```
/theme-new corporate
/theme-new dark-blue
/theme-new brand-theme
```
## Tool Mapping
This command uses the `theme_create` MCP tool:
```python
theme_create(
name="corporate",
primary_color="indigo",
color_scheme="light",
font_family="Inter, sans-serif",
heading_font_family=None, # Optional: separate heading font
border_radius="md", # xs, sm, md, lg, xl
spacing_scale=1.0, # Multiplier for spacing
colors=None # Optional: custom color palette
)
```
## Workflow
1. **User invokes**: `/theme-new corporate`
2. **Agent asks**: Primary color preference?
3. **Agent asks**: Light or dark color scheme?
4. **Agent asks**: Font family preference?
5. **Agent creates**: Theme with `theme_create`
6. **Agent validates**: Theme with `theme_validate`
7. **Agent activates**: New theme is ready to use
## Theme Properties
### Colors
- `primary_color`: Main accent color (blue, indigo, violet, etc.)
- `color_scheme`: "light" or "dark"
- `colors`: Custom color palette override
### Typography
- `font_family`: Body text font
- `heading_font_family`: Optional heading font
### Spacing
- `border_radius`: Component corner rounding
- `spacing_scale`: Multiply default spacing values
## Mantine Color Palette
Available primary colors:
- blue, cyan, teal, green, lime
- yellow, orange, red, pink, grape
- violet, indigo, gray, dark
## Custom Color Example
```python
theme_create(
name="brand",
primary_color="custom",
colors={
"custom": [
"#e6f7ff", # 0 - lightest
"#bae7ff", # 1
"#91d5ff", # 2
"#69c0ff", # 3
"#40a9ff", # 4
"#1890ff", # 5 - primary
"#096dd9", # 6
"#0050b3", # 7
"#003a8c", # 8
"#002766" # 9 - darkest
]
}
)
```
## Extending Themes
To create a theme based on another:
```python
theme_extend(
base_theme="dark",
name="dark-corporate",
overrides={
"primary_color": "indigo",
"font_family": "Roboto, sans-serif"
}
)
theme_create(name="corporate", primary_color="indigo", color_scheme="light", font_family="Inter")
theme_validate(theme_name="corporate")
```
## Related Commands