feat(viz-platform): complete Sprint 1 - plugin structure and tests
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>
This commit is contained in:
86
plugins/viz-platform/commands/chart.md
Normal file
86
plugins/viz-platform/commands/chart.md
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
description: Create a Plotly chart with theme integration
|
||||
---
|
||||
|
||||
# Create Chart
|
||||
|
||||
Create a Plotly chart with automatic theme token application.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/chart {type}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `type` (required): Chart type - one of: line, bar, scatter, pie, area, histogram, box, heatmap, sunburst, treemap
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/chart line
|
||||
/chart bar
|
||||
/chart scatter
|
||||
/chart pie
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `chart_create` MCP tool:
|
||||
|
||||
```python
|
||||
chart_create(
|
||||
chart_type="line",
|
||||
data_ref="df_sales", # Reference to loaded DataFrame
|
||||
x="date", # X-axis column
|
||||
y="revenue", # Y-axis column
|
||||
color=None, # Optional: column for color grouping
|
||||
title="Sales Over Time", # Optional: chart title
|
||||
theme=None # Optional: theme name to apply
|
||||
)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **User invokes**: `/chart line`
|
||||
2. **Agent asks**: Which DataFrame to use? (list available with `list_data` from data-platform)
|
||||
3. **Agent asks**: Which columns for X and Y axes?
|
||||
4. **Agent asks**: Any grouping/color column?
|
||||
5. **Agent creates**: Chart with `chart_create` tool
|
||||
6. **Agent returns**: Plotly figure JSON ready for rendering
|
||||
|
||||
## Chart Types
|
||||
|
||||
| Type | Best For |
|
||||
|------|----------|
|
||||
| `line` | Time series, trends |
|
||||
| `bar` | Comparisons, categories |
|
||||
| `scatter` | Correlations, distributions |
|
||||
| `pie` | Part-to-whole relationships |
|
||||
| `area` | Cumulative trends |
|
||||
| `histogram` | Frequency distributions |
|
||||
| `box` | Statistical distributions |
|
||||
| `heatmap` | Matrix correlations |
|
||||
| `sunburst` | Hierarchical data |
|
||||
| `treemap` | Hierarchical proportions |
|
||||
|
||||
## Theme Integration
|
||||
|
||||
Charts automatically inherit colors from the active theme:
|
||||
- Primary color for main data
|
||||
- Color palette for multi-series
|
||||
- Font family and sizes
|
||||
- Background colors
|
||||
|
||||
Override with explicit theme:
|
||||
```python
|
||||
chart_create(chart_type="bar", ..., theme="my-dark-theme")
|
||||
```
|
||||
|
||||
## Output
|
||||
|
||||
Returns Plotly figure JSON that can be:
|
||||
- Rendered in a Dash app
|
||||
- Saved as HTML/PNG
|
||||
- Embedded in a layout component
|
||||
161
plugins/viz-platform/commands/component.md
Normal file
161
plugins/viz-platform/commands/component.md
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
description: Inspect Dash Mantine Component props and validation
|
||||
---
|
||||
|
||||
# Inspect Component
|
||||
|
||||
Inspect a Dash Mantine Component's available props, types, and defaults.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/component {name}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `name` (required): DMC component name (e.g., Button, Card, TextInput)
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/component Button
|
||||
/component TextInput
|
||||
/component Select
|
||||
/component Card
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `get_component_props` MCP tool:
|
||||
|
||||
```python
|
||||
get_component_props(component="Button")
|
||||
```
|
||||
|
||||
## Output Example
|
||||
|
||||
```json
|
||||
{
|
||||
"component": "Button",
|
||||
"category": "inputs",
|
||||
"props": {
|
||||
"children": {
|
||||
"type": "any",
|
||||
"required": false,
|
||||
"description": "Button content"
|
||||
},
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"enum": ["filled", "outline", "light", "subtle", "default", "gradient"],
|
||||
"default": "filled",
|
||||
"description": "Button appearance variant"
|
||||
},
|
||||
"color": {
|
||||
"type": "string",
|
||||
"default": "blue",
|
||||
"description": "Button color from theme"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"enum": ["xs", "sm", "md", "lg", "xl"],
|
||||
"default": "sm",
|
||||
"description": "Button size"
|
||||
},
|
||||
"radius": {
|
||||
"type": "string",
|
||||
"enum": ["xs", "sm", "md", "lg", "xl"],
|
||||
"default": "sm",
|
||||
"description": "Border radius"
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Disable button"
|
||||
},
|
||||
"loading": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Show loading indicator"
|
||||
},
|
||||
"fullWidth": {
|
||||
"type": "boolean",
|
||||
"default": false,
|
||||
"description": "Button takes full width"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Listing All Components
|
||||
|
||||
To see all available components:
|
||||
|
||||
```python
|
||||
list_components(category=None) # All components
|
||||
list_components(category="inputs") # Just input components
|
||||
```
|
||||
|
||||
### Component Categories
|
||||
|
||||
| Category | Components |
|
||||
|----------|------------|
|
||||
| `inputs` | Button, TextInput, Select, Checkbox, Radio, Switch, Slider, etc. |
|
||||
| `navigation` | NavLink, Tabs, Breadcrumbs, Pagination, Stepper |
|
||||
| `feedback` | Alert, Notification, Progress, Loader, Skeleton |
|
||||
| `overlays` | Modal, Drawer, Tooltip, Popover, Menu |
|
||||
| `typography` | Text, Title, Code, Blockquote, List |
|
||||
| `layout` | Container, Grid, Stack, Group, Space, Divider |
|
||||
| `data` | Table, Badge, Card, Paper, Timeline |
|
||||
|
||||
## Validating Component Usage
|
||||
|
||||
After inspecting props, validate your usage:
|
||||
|
||||
```python
|
||||
validate_component(
|
||||
component="Button",
|
||||
props={
|
||||
"variant": "filled",
|
||||
"color": "blue",
|
||||
"size": "lg",
|
||||
"children": "Click me"
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
Returns:
|
||||
```json
|
||||
{
|
||||
"valid": true,
|
||||
"errors": [],
|
||||
"warnings": []
|
||||
}
|
||||
```
|
||||
|
||||
Or with errors:
|
||||
```json
|
||||
{
|
||||
"valid": false,
|
||||
"errors": [
|
||||
"Invalid prop 'colour' for Button. Did you mean 'color'?",
|
||||
"Prop 'size' expects one of ['xs', 'sm', 'md', 'lg', 'xl'], got 'huge'"
|
||||
],
|
||||
"warnings": [
|
||||
"Prop 'fullwidth' should be 'fullWidth' (camelCase)"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Why This Matters
|
||||
|
||||
DMC components have many props with specific type constraints. This tool:
|
||||
- Prevents hallucinated prop names
|
||||
- Validates enum values
|
||||
- Catches typos before runtime
|
||||
- Documents available options
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/chart {type}` - Create charts
|
||||
- `/dashboard {template}` - Create layouts
|
||||
115
plugins/viz-platform/commands/dashboard.md
Normal file
115
plugins/viz-platform/commands/dashboard.md
Normal file
@@ -0,0 +1,115 @@
|
||||
---
|
||||
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
|
||||
166
plugins/viz-platform/commands/initial-setup.md
Normal file
166
plugins/viz-platform/commands/initial-setup.md
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
description: Interactive setup wizard for viz-platform plugin - configures MCP server and theme preferences
|
||||
---
|
||||
|
||||
# Viz-Platform Setup Wizard
|
||||
|
||||
This command sets up the viz-platform plugin with Dash Mantine Components validation and theming.
|
||||
|
||||
## Important Context
|
||||
|
||||
- **This command uses Bash, Read, Write, and AskUserQuestion tools** - NOT MCP tools
|
||||
- **MCP tools won't work until after setup + session restart**
|
||||
- **DMC version detection is automatic** based on installed package
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Environment Validation
|
||||
|
||||
### Step 1.1: Check Python Version
|
||||
|
||||
```bash
|
||||
python3 --version
|
||||
```
|
||||
|
||||
Requires Python 3.10+. If below, stop setup and inform user.
|
||||
|
||||
### Step 1.2: Check DMC Installation
|
||||
|
||||
```bash
|
||||
python3 -c "import dash_mantine_components as dmc; print(f'DMC {dmc.__version__}')" 2>/dev/null || echo "DMC_NOT_INSTALLED"
|
||||
```
|
||||
|
||||
If DMC is not installed, inform user:
|
||||
```
|
||||
Dash Mantine Components is not installed. Install it with:
|
||||
pip install dash-mantine-components>=0.14.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: MCP Server Setup
|
||||
|
||||
### Step 2.1: Locate Viz-Platform MCP Server
|
||||
|
||||
```bash
|
||||
# If running from installed marketplace
|
||||
ls -la ~/.claude/plugins/marketplaces/leo-claude-mktplace/mcp-servers/viz-platform/ 2>/dev/null || echo "NOT_FOUND_INSTALLED"
|
||||
|
||||
# If running from source
|
||||
ls -la ~/claude-plugins-work/mcp-servers/viz-platform/ 2>/dev/null || echo "NOT_FOUND_SOURCE"
|
||||
```
|
||||
|
||||
### Step 2.2: Check Virtual Environment
|
||||
|
||||
```bash
|
||||
ls -la /path/to/mcp-servers/viz-platform/.venv/bin/python 2>/dev/null && echo "VENV_EXISTS" || echo "VENV_MISSING"
|
||||
```
|
||||
|
||||
### Step 2.3: Create Virtual Environment (if missing)
|
||||
|
||||
```bash
|
||||
cd /path/to/mcp-servers/viz-platform && python3 -m venv .venv && source .venv/bin/activate && pip install --upgrade pip && pip install -r requirements.txt && deactivate
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: Theme Preferences (Optional)
|
||||
|
||||
### Step 3.1: Ask About Theme Setup
|
||||
|
||||
Use AskUserQuestion:
|
||||
- Question: "Do you want to configure a default theme for your projects?"
|
||||
- Header: "Theme"
|
||||
- Options:
|
||||
- "Yes, set up a custom theme"
|
||||
- "No, use Mantine defaults"
|
||||
|
||||
**If user chooses "No":** Skip to Phase 4.
|
||||
|
||||
### Step 3.2: Choose Base Theme
|
||||
|
||||
Use AskUserQuestion:
|
||||
- Question: "Which base color scheme do you prefer?"
|
||||
- Header: "Colors"
|
||||
- Options:
|
||||
- "Light mode (default)"
|
||||
- "Dark mode"
|
||||
- "System preference (auto)"
|
||||
|
||||
### Step 3.3: Choose Primary Color
|
||||
|
||||
Use AskUserQuestion:
|
||||
- Question: "What primary color should be used for buttons and accents?"
|
||||
- Header: "Primary"
|
||||
- Options:
|
||||
- "Blue (default)"
|
||||
- "Indigo"
|
||||
- "Violet"
|
||||
- "Other (I'll specify)"
|
||||
|
||||
### Step 3.4: Create System Theme Config
|
||||
|
||||
```bash
|
||||
mkdir -p ~/.config/claude
|
||||
cat > ~/.config/claude/viz-platform.env << 'EOF'
|
||||
# Viz-Platform Configuration
|
||||
# Generated by viz-platform /initial-setup
|
||||
|
||||
VIZ_PLATFORM_COLOR_SCHEME=<SELECTED_SCHEME>
|
||||
VIZ_PLATFORM_PRIMARY_COLOR=<SELECTED_COLOR>
|
||||
EOF
|
||||
chmod 600 ~/.config/claude/viz-platform.env
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 4: Validation
|
||||
|
||||
### Step 4.1: Verify MCP Server
|
||||
|
||||
```bash
|
||||
cd /path/to/mcp-servers/viz-platform && .venv/bin/python -c "from mcp_server.server import VizPlatformMCPServer; print('MCP Server OK')"
|
||||
```
|
||||
|
||||
### Step 4.2: Summary
|
||||
|
||||
```
|
||||
╔════════════════════════════════════════════════════════════╗
|
||||
║ VIZ-PLATFORM SETUP COMPLETE ║
|
||||
╠════════════════════════════════════════════════════════════╣
|
||||
║ MCP Server: ✓ Ready ║
|
||||
║ DMC Version: [Detected version] ║
|
||||
║ DMC Tools: ✓ Available (3 tools) ║
|
||||
║ Chart Tools: ✓ Available (2 tools) ║
|
||||
║ Layout Tools: ✓ Available (5 tools) ║
|
||||
║ Theme Tools: ✓ Available (6 tools) ║
|
||||
║ Page Tools: ✓ Available (5 tools) ║
|
||||
╚════════════════════════════════════════════════════════════╝
|
||||
```
|
||||
|
||||
### Step 4.3: Session Restart Notice
|
||||
|
||||
---
|
||||
|
||||
**⚠️ Session Restart Required**
|
||||
|
||||
Restart your Claude Code session for MCP tools to become available.
|
||||
|
||||
**After restart, you can:**
|
||||
- Run `/component {name}` to inspect component props
|
||||
- Run `/chart {type}` to create a chart
|
||||
- Run `/dashboard {template}` to create a dashboard layout
|
||||
- Run `/theme {name}` to apply a theme
|
||||
- Run `/theme-new {name}` to create a custom theme
|
||||
|
||||
---
|
||||
|
||||
## Tool Summary
|
||||
|
||||
| Category | Tools |
|
||||
|----------|-------|
|
||||
| DMC Validation | list_components, get_component_props, validate_component |
|
||||
| Charts | chart_create, chart_configure_interaction |
|
||||
| Layouts | layout_create, layout_add_filter, layout_set_grid, layout_get, layout_add_section |
|
||||
| Themes | theme_create, theme_extend, theme_validate, theme_export_css, theme_list, theme_activate |
|
||||
| Pages | page_create, page_add_navbar, page_set_auth, page_list, page_get_app_config |
|
||||
111
plugins/viz-platform/commands/theme-css.md
Normal file
111
plugins/viz-platform/commands/theme-css.md
Normal file
@@ -0,0 +1,111 @@
|
||||
---
|
||||
description: Export a theme as CSS custom properties
|
||||
---
|
||||
|
||||
# Export Theme as CSS
|
||||
|
||||
Export a theme's design tokens as CSS custom properties for use outside Dash.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/theme-css {name}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `name` (required): Theme name to export
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/theme-css dark
|
||||
/theme-css corporate
|
||||
/theme-css my-brand
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `theme_export_css` MCP tool:
|
||||
|
||||
```python
|
||||
theme_export_css(theme_name="corporate")
|
||||
```
|
||||
|
||||
## Output Example
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* Colors */
|
||||
--mantine-color-scheme: light;
|
||||
--mantine-primary-color: indigo;
|
||||
--mantine-color-primary-0: #edf2ff;
|
||||
--mantine-color-primary-1: #dbe4ff;
|
||||
--mantine-color-primary-2: #bac8ff;
|
||||
--mantine-color-primary-3: #91a7ff;
|
||||
--mantine-color-primary-4: #748ffc;
|
||||
--mantine-color-primary-5: #5c7cfa;
|
||||
--mantine-color-primary-6: #4c6ef5;
|
||||
--mantine-color-primary-7: #4263eb;
|
||||
--mantine-color-primary-8: #3b5bdb;
|
||||
--mantine-color-primary-9: #364fc7;
|
||||
|
||||
/* Typography */
|
||||
--mantine-font-family: Inter, sans-serif;
|
||||
--mantine-heading-font-family: Inter, sans-serif;
|
||||
--mantine-font-size-xs: 0.75rem;
|
||||
--mantine-font-size-sm: 0.875rem;
|
||||
--mantine-font-size-md: 1rem;
|
||||
--mantine-font-size-lg: 1.125rem;
|
||||
--mantine-font-size-xl: 1.25rem;
|
||||
|
||||
/* Spacing */
|
||||
--mantine-spacing-xs: 0.625rem;
|
||||
--mantine-spacing-sm: 0.75rem;
|
||||
--mantine-spacing-md: 1rem;
|
||||
--mantine-spacing-lg: 1.25rem;
|
||||
--mantine-spacing-xl: 2rem;
|
||||
|
||||
/* Border Radius */
|
||||
--mantine-radius-xs: 0.125rem;
|
||||
--mantine-radius-sm: 0.25rem;
|
||||
--mantine-radius-md: 0.5rem;
|
||||
--mantine-radius-lg: 1rem;
|
||||
--mantine-radius-xl: 2rem;
|
||||
|
||||
/* Shadows */
|
||||
--mantine-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
--mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--mantine-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
--mantine-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
--mantine-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
## Use Cases
|
||||
|
||||
### External CSS Files
|
||||
Include the exported CSS in non-Dash projects:
|
||||
```html
|
||||
<link rel="stylesheet" href="theme-tokens.css">
|
||||
```
|
||||
|
||||
### Design Handoff
|
||||
Share design tokens with designers or other teams.
|
||||
|
||||
### Documentation
|
||||
Generate theme documentation for style guides.
|
||||
|
||||
### Other Frameworks
|
||||
Use Mantine-compatible tokens in React, Vue, or other projects.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **User invokes**: `/theme-css corporate`
|
||||
2. **Tool exports**: Theme tokens as CSS
|
||||
3. **User can**: Save to file or copy to clipboard
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/theme {name}` - Apply a theme
|
||||
- `/theme-new {name}` - Create a new theme
|
||||
117
plugins/viz-platform/commands/theme-new.md
Normal file
117
plugins/viz-platform/commands/theme-new.md
Normal file
@@ -0,0 +1,117 @@
|
||||
---
|
||||
description: Create a new custom theme with design tokens
|
||||
---
|
||||
|
||||
# Create New Theme
|
||||
|
||||
Create a new custom theme with specified design tokens.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/theme-new {name}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `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"
|
||||
}
|
||||
)
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/theme {name}` - Apply a theme
|
||||
- `/theme-css {name}` - Export theme as CSS
|
||||
69
plugins/viz-platform/commands/theme.md
Normal file
69
plugins/viz-platform/commands/theme.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
description: Apply an existing theme to the current context
|
||||
---
|
||||
|
||||
# Apply Theme
|
||||
|
||||
Apply an existing theme to activate its design tokens.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/theme {name}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `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")
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/theme-new {name}` - Create a new theme
|
||||
- `/theme-css {name}` - Export theme as CSS
|
||||
Reference in New Issue
Block a user