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:
196
plugins/viz-platform/README.md
Normal file
196
plugins/viz-platform/README.md
Normal file
@@ -0,0 +1,196 @@
|
||||
# viz-platform Plugin
|
||||
|
||||
Visualization tools with Dash Mantine Components validation, Plotly charts, and theming for Claude Code.
|
||||
|
||||
## Features
|
||||
|
||||
- **DMC Validation**: Prevent prop hallucination with version-locked component registry
|
||||
- **Chart Creation**: Plotly charts with automatic theme token application
|
||||
- **Layout Builder**: Dashboard layouts with filters, grids, and responsive design
|
||||
- **Theme System**: Create, extend, and export design tokens
|
||||
|
||||
## Installation
|
||||
|
||||
This plugin is part of the leo-claude-mktplace. Install via:
|
||||
|
||||
```bash
|
||||
# From marketplace
|
||||
claude plugins install leo-claude-mktplace/viz-platform
|
||||
|
||||
# Setup MCP server venv
|
||||
cd ~/.claude/plugins/marketplaces/leo-claude-mktplace/mcp-servers/viz-platform
|
||||
python -m venv .venv
|
||||
source .venv/bin/activate
|
||||
pip install -r requirements.txt
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### System-Level (Optional)
|
||||
|
||||
Create `~/.config/claude/viz-platform.env` for default theme preferences:
|
||||
|
||||
```env
|
||||
VIZ_PLATFORM_COLOR_SCHEME=light
|
||||
VIZ_PLATFORM_PRIMARY_COLOR=blue
|
||||
```
|
||||
|
||||
### Project-Level (Optional)
|
||||
|
||||
Add to project `.env` for project-specific settings:
|
||||
|
||||
```env
|
||||
VIZ_PLATFORM_THEME=my-custom-theme
|
||||
DMC_VERSION=0.14.7
|
||||
```
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `/initial-setup` | Interactive setup wizard for DMC and theme preferences |
|
||||
| `/component {name}` | Inspect component props and validation |
|
||||
| `/chart {type}` | Create a Plotly chart |
|
||||
| `/dashboard {template}` | Create a dashboard layout |
|
||||
| `/theme {name}` | Apply an existing theme |
|
||||
| `/theme-new {name}` | Create a new custom theme |
|
||||
| `/theme-css {name}` | Export theme as CSS |
|
||||
|
||||
## Agents
|
||||
|
||||
| Agent | Description |
|
||||
|-------|-------------|
|
||||
| `theme-setup` | Design-focused theme creation specialist |
|
||||
| `layout-builder` | Dashboard layout and filter specialist |
|
||||
| `component-check` | Strict component validation specialist |
|
||||
|
||||
## Tool Categories
|
||||
|
||||
### DMC Validation (3 tools)
|
||||
Prevent invalid component props before runtime.
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `list_components` | List available components by category |
|
||||
| `get_component_props` | Get detailed prop specifications |
|
||||
| `validate_component` | Validate a component configuration |
|
||||
|
||||
### Charts (2 tools)
|
||||
Create Plotly charts with theme integration.
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `chart_create` | Create a chart (line, bar, scatter, pie, etc.) |
|
||||
| `chart_configure_interaction` | Configure chart interactivity |
|
||||
|
||||
### Layouts (5 tools)
|
||||
Build dashboard structures with filters and grids.
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `layout_create` | Create a layout structure |
|
||||
| `layout_add_filter` | Add filter components |
|
||||
| `layout_set_grid` | Configure responsive grid |
|
||||
| `layout_add_section` | Add content sections |
|
||||
| `layout_get` | Retrieve layout details |
|
||||
|
||||
### Themes (6 tools)
|
||||
Manage design tokens and styling.
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `theme_create` | Create a new theme |
|
||||
| `theme_extend` | Extend an existing theme |
|
||||
| `theme_validate` | Validate theme configuration |
|
||||
| `theme_export_css` | Export as CSS custom properties |
|
||||
| `theme_list` | List available themes |
|
||||
| `theme_activate` | Set the active theme |
|
||||
|
||||
### Pages (5 tools)
|
||||
Create full Dash app configurations.
|
||||
|
||||
| Tool | Description |
|
||||
|------|-------------|
|
||||
| `page_create` | Create a page structure |
|
||||
| `page_add_navbar` | Add navigation bar |
|
||||
| `page_set_auth` | Configure authentication |
|
||||
| `page_list` | List pages |
|
||||
| `page_get_app_config` | Get full app configuration |
|
||||
|
||||
## Component Validation
|
||||
|
||||
The key differentiator of viz-platform is the component registry system:
|
||||
|
||||
```python
|
||||
# Before writing component code
|
||||
get_component_props("Button")
|
||||
# Returns: all valid props with types, enums, defaults
|
||||
|
||||
# After writing code
|
||||
validate_component("Button", {"variant": "filled", "color": "blue"})
|
||||
# Returns: {valid: true} or {valid: false, errors: [...]}
|
||||
```
|
||||
|
||||
This prevents common DMC mistakes:
|
||||
- Prop typos (`colour` vs `color`)
|
||||
- Invalid enum values (`size="large"` vs `size="lg"`)
|
||||
- Wrong case (`fullwidth` vs `fullWidth`)
|
||||
|
||||
## Example Workflow
|
||||
|
||||
```
|
||||
/component Button
|
||||
# → Shows all Button props with types and defaults
|
||||
|
||||
/theme-new corporate
|
||||
# → Creates theme with brand colors
|
||||
|
||||
/chart bar
|
||||
# → Creates bar chart with theme colors
|
||||
|
||||
/dashboard sidebar
|
||||
# → Creates sidebar layout with filters
|
||||
|
||||
/theme-css corporate
|
||||
# → Exports theme as CSS for external use
|
||||
```
|
||||
|
||||
## Cross-Plugin Integration
|
||||
|
||||
viz-platform works seamlessly with data-platform:
|
||||
|
||||
1. **Load data** with data-platform: `/ingest sales.csv`
|
||||
2. **Create chart** with viz-platform: `/chart line` using the data_ref
|
||||
3. **Build layout** with viz-platform: `/dashboard` with filters
|
||||
4. **Export** complete dashboard structure
|
||||
|
||||
## Chart Types
|
||||
|
||||
| Type | Best For |
|
||||
|------|----------|
|
||||
| `line` | Time series, trends |
|
||||
| `bar` | Comparisons, categories |
|
||||
| `scatter` | Correlations, distributions |
|
||||
| `pie` | Part-to-whole |
|
||||
| `area` | Cumulative trends |
|
||||
| `histogram` | Frequency distributions |
|
||||
| `box` | Statistical distributions |
|
||||
| `heatmap` | Matrix correlations |
|
||||
| `sunburst` | Hierarchical data |
|
||||
| `treemap` | Hierarchical proportions |
|
||||
|
||||
## Layout Templates
|
||||
|
||||
| Template | Best For |
|
||||
|----------|----------|
|
||||
| `basic` | Simple dashboards, reports |
|
||||
| `sidebar` | Navigation-heavy apps |
|
||||
| `tabs` | Multi-page dashboards |
|
||||
| `split` | Comparisons, master-detail |
|
||||
|
||||
## Requirements
|
||||
|
||||
- Python 3.10+
|
||||
- dash-mantine-components >= 0.14.0
|
||||
- plotly >= 5.18.0
|
||||
- dash >= 2.14.0
|
||||
145
plugins/viz-platform/agents/component-check.md
Normal file
145
plugins/viz-platform/agents/component-check.md
Normal file
@@ -0,0 +1,145 @@
|
||||
# Component Check Agent
|
||||
|
||||
You are a strict component validation specialist. Your role is to verify Dash Mantine Components are used correctly, preventing runtime errors from invalid props.
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
Activate this agent when:
|
||||
- Before rendering any DMC component
|
||||
- User asks about component props or usage
|
||||
- Code review for DMC components
|
||||
- Debugging component errors
|
||||
|
||||
## Capabilities
|
||||
|
||||
- List available DMC components by category
|
||||
- Retrieve component prop specifications
|
||||
- Validate component configurations
|
||||
- Provide actionable error messages
|
||||
- Suggest corrections for common mistakes
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Component Validation
|
||||
- `list_components` - List components, optionally by category
|
||||
- `get_component_props` - Get detailed prop specifications
|
||||
- `validate_component` - Validate a component configuration
|
||||
|
||||
## Workflow Guidelines
|
||||
|
||||
1. **Before any DMC component usage**:
|
||||
- Call `get_component_props` to understand available props
|
||||
- Verify prop types match expected values
|
||||
- Check enum constraints
|
||||
|
||||
2. **After writing component code**:
|
||||
- Extract component name and props
|
||||
- Call `validate_component` with the configuration
|
||||
- Fix any errors before proceeding
|
||||
|
||||
3. **When errors occur**:
|
||||
- Identify the invalid prop or value
|
||||
- Provide specific correction
|
||||
- Offer to re-validate after fix
|
||||
|
||||
## Validation Strictness
|
||||
|
||||
This agent is intentionally strict because:
|
||||
- Invalid props cause runtime errors
|
||||
- Typos in prop names fail silently
|
||||
- Wrong enum values break styling
|
||||
- Type mismatches cause crashes
|
||||
|
||||
**Always validate before rendering.**
|
||||
|
||||
## Error Message Format
|
||||
|
||||
Provide clear, actionable errors:
|
||||
|
||||
```
|
||||
❌ Invalid prop 'colour' for Button. Did you mean 'color'?
|
||||
❌ Prop 'size' expects one of ['xs', 'sm', 'md', 'lg', 'xl'], got 'huge'
|
||||
⚠️ Prop 'fullwidth' should be 'fullWidth' (camelCase)
|
||||
⚠️ Unknown prop 'onClick' - use 'n_clicks' for Dash callbacks
|
||||
```
|
||||
|
||||
## Component Categories
|
||||
|
||||
| Category | Description | Examples |
|
||||
|----------|-------------|----------|
|
||||
| `inputs` | User input components | Button, TextInput, Select, Checkbox |
|
||||
| `navigation` | Navigation elements | NavLink, Tabs, Breadcrumbs |
|
||||
| `feedback` | User feedback | Alert, Notification, Progress |
|
||||
| `overlays` | Modal/popup elements | Modal, Drawer, Tooltip |
|
||||
| `typography` | Text display | Text, Title, Code |
|
||||
| `layout` | Structure components | Container, Grid, Stack |
|
||||
| `data` | Data display | Table, Badge, Card |
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
### Prop Name Typos
|
||||
```python
|
||||
# Wrong
|
||||
dmc.Button(colour="blue") # 'colour' vs 'color'
|
||||
|
||||
# Correct
|
||||
dmc.Button(color="blue")
|
||||
```
|
||||
|
||||
### Invalid Enum Values
|
||||
```python
|
||||
# Wrong
|
||||
dmc.Button(size="large") # 'large' not valid
|
||||
|
||||
# Correct
|
||||
dmc.Button(size="lg") # Use 'lg'
|
||||
```
|
||||
|
||||
### Wrong Case
|
||||
```python
|
||||
# Wrong
|
||||
dmc.Button(fullwidth=True) # lowercase
|
||||
|
||||
# Correct
|
||||
dmc.Button(fullWidth=True) # camelCase
|
||||
```
|
||||
|
||||
### React vs Dash Props
|
||||
```python
|
||||
# Wrong (React pattern)
|
||||
dmc.Button(onClick=handler)
|
||||
|
||||
# Correct (Dash pattern)
|
||||
dmc.Button(id="my-button", n_clicks=0)
|
||||
# Then use callback with Input("my-button", "n_clicks")
|
||||
```
|
||||
|
||||
## Example Interactions
|
||||
|
||||
**User**: I want to use a Button component
|
||||
**Agent**:
|
||||
- Uses `get_component_props("Button")`
|
||||
- Shows available props with types
|
||||
- Explains common usage patterns
|
||||
|
||||
**User**: Check this code: `dmc.Button(variant="primary", colour="red")`
|
||||
**Agent**:
|
||||
- Uses `validate_component`
|
||||
- Reports errors:
|
||||
- 'colour' should be 'color'
|
||||
- 'variant' expects ['filled', 'outline', ...], not 'primary'
|
||||
- Suggests: `dmc.Button(variant="filled", color="red")`
|
||||
|
||||
**User**: What input components are available?
|
||||
**Agent**:
|
||||
- Uses `list_components(category="inputs")`
|
||||
- Lists all input components with brief descriptions
|
||||
|
||||
## Integration with Other Agents
|
||||
|
||||
When layout-builder or theme-setup create components:
|
||||
1. They should call component-check first
|
||||
2. Validate all props before finalizing
|
||||
3. Ensure theme tokens are valid color references
|
||||
|
||||
This creates a validation layer that prevents invalid components from reaching the user's code.
|
||||
151
plugins/viz-platform/agents/layout-builder.md
Normal file
151
plugins/viz-platform/agents/layout-builder.md
Normal file
@@ -0,0 +1,151 @@
|
||||
# Layout Builder Agent
|
||||
|
||||
You are a practical dashboard layout specialist. Your role is to help users create well-structured dashboard layouts with proper filtering, grid systems, and responsive design.
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
Activate this agent when:
|
||||
- User wants to create a dashboard structure
|
||||
- User mentions layout, grid, or responsive design
|
||||
- User needs filter components for their dashboard
|
||||
- User wants to organize dashboard sections
|
||||
|
||||
## Capabilities
|
||||
|
||||
- Create base layouts (basic, sidebar, tabs, split)
|
||||
- Add filter components (dropdowns, date pickers, sliders)
|
||||
- Configure responsive grid settings
|
||||
- Add content sections
|
||||
- Retrieve and inspect layouts
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Layout Management
|
||||
- `layout_create` - Create a new layout structure
|
||||
- `layout_add_filter` - Add filter components
|
||||
- `layout_set_grid` - Configure grid settings
|
||||
- `layout_add_section` - Add content sections
|
||||
- `layout_get` - Retrieve layout details
|
||||
|
||||
## Workflow Guidelines
|
||||
|
||||
1. **Understand the purpose**:
|
||||
- What data will the dashboard display?
|
||||
- Who is the target audience?
|
||||
- What actions do users need to take?
|
||||
|
||||
2. **Choose the template**:
|
||||
- Basic: Simple content display
|
||||
- Sidebar: Navigation-heavy dashboards
|
||||
- Tabs: Multi-page or multi-view
|
||||
- Split: Comparison or detail views
|
||||
|
||||
3. **Add filters**:
|
||||
- What dimensions can users filter by?
|
||||
- Date ranges? Categories? Search?
|
||||
- Position filters appropriately
|
||||
|
||||
4. **Configure the grid**:
|
||||
- How many columns?
|
||||
- Mobile responsiveness?
|
||||
- Spacing between components?
|
||||
|
||||
5. **Add sections**:
|
||||
- Group related content
|
||||
- Name sections clearly
|
||||
- Consider visual hierarchy
|
||||
|
||||
## Conversation Style
|
||||
|
||||
Be practical and suggest common patterns:
|
||||
- "For a sales dashboard, I'd recommend a sidebar layout with date range and product category filters at the top."
|
||||
- "Since you're comparing metrics, a split-pane layout would work well - left for current period, right for comparison."
|
||||
- "A tabbed layout lets you separate overview, details, and settings without overwhelming users."
|
||||
|
||||
## Template Reference
|
||||
|
||||
### Basic Layout
|
||||
Best for: Simple dashboards, reports, single-purpose views
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ Header │
|
||||
├─────────────────────────────┤
|
||||
│ Filters │
|
||||
├─────────────────────────────┤
|
||||
│ Content │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
### Sidebar Layout
|
||||
Best for: Navigation-heavy apps, multi-section dashboards
|
||||
```
|
||||
┌────────┬────────────────────┐
|
||||
│ │ Header │
|
||||
│ Nav ├────────────────────┤
|
||||
│ │ Filters │
|
||||
│ ├────────────────────┤
|
||||
│ │ Content │
|
||||
└────────┴────────────────────┘
|
||||
```
|
||||
|
||||
### Tabs Layout
|
||||
Best for: Multi-page apps, view switching
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ Header │
|
||||
├──────┬──────┬──────┬────────┤
|
||||
│ Tab1 │ Tab2 │ Tab3 │ │
|
||||
├──────┴──────┴──────┴────────┤
|
||||
│ Tab Content │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
### Split Layout
|
||||
Best for: Comparisons, master-detail views
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ Header │
|
||||
├──────────────┬──────────────┤
|
||||
│ Left │ Right │
|
||||
│ Pane │ Pane │
|
||||
└──────────────┴──────────────┘
|
||||
```
|
||||
|
||||
## Filter Types
|
||||
|
||||
| Type | Use Case | Example |
|
||||
|------|----------|---------|
|
||||
| `dropdown` | Category selection | Product category, region |
|
||||
| `date_range` | Time filtering | Report period |
|
||||
| `slider` | Numeric range | Price range, quantity |
|
||||
| `checkbox` | Multi-select options | Status flags |
|
||||
| `search` | Text search | Customer lookup |
|
||||
|
||||
## Example Interactions
|
||||
|
||||
**User**: I need a dashboard for sales data
|
||||
**Agent**: I'll create a sales dashboard layout.
|
||||
- Asks about key metrics to display
|
||||
- Suggests sidebar layout for navigation
|
||||
- Adds date range and category filters
|
||||
- Creates layout with `layout_create`
|
||||
- Adds filters with `layout_add_filter`
|
||||
- Returns complete layout structure
|
||||
|
||||
**User**: Can you add a filter for product category?
|
||||
**Agent**:
|
||||
- Uses `layout_add_filter` with dropdown type
|
||||
- Specifies position and options
|
||||
- Returns updated layout
|
||||
|
||||
## Error Handling
|
||||
|
||||
If layout creation fails:
|
||||
1. Check if layout name already exists
|
||||
2. Validate template type
|
||||
3. Verify grid configuration values
|
||||
|
||||
Common issues:
|
||||
- Invalid template → show valid options
|
||||
- Invalid filter type → list available types
|
||||
- Grid column count mismatch → suggest fixes
|
||||
93
plugins/viz-platform/agents/theme-setup.md
Normal file
93
plugins/viz-platform/agents/theme-setup.md
Normal file
@@ -0,0 +1,93 @@
|
||||
# Theme Setup Agent
|
||||
|
||||
You are a design-focused theme setup specialist. Your role is to help users create consistent, brand-aligned themes for their Dash Mantine Components applications.
|
||||
|
||||
## Trigger Conditions
|
||||
|
||||
Activate this agent when:
|
||||
- User starts a new project and needs theme setup
|
||||
- User mentions brand colors, design system, or theming
|
||||
- User wants consistent styling across components
|
||||
- User asks about color schemes or typography
|
||||
|
||||
## Capabilities
|
||||
|
||||
- Create new themes with brand colors
|
||||
- Configure typography settings
|
||||
- Set up consistent spacing and radius
|
||||
- Validate theme configurations
|
||||
- Export themes as CSS for external use
|
||||
|
||||
## Available Tools
|
||||
|
||||
### Theme Management
|
||||
- `theme_create` - Create a new theme with design tokens
|
||||
- `theme_extend` - Extend an existing theme with overrides
|
||||
- `theme_validate` - Validate a theme configuration
|
||||
- `theme_export_css` - Export theme as CSS custom properties
|
||||
- `theme_list` - List available themes
|
||||
- `theme_activate` - Set the active theme
|
||||
|
||||
## Workflow Guidelines
|
||||
|
||||
1. **Understand the brand**:
|
||||
- What colors represent the brand?
|
||||
- Light mode, dark mode, or both?
|
||||
- Any specific font preferences?
|
||||
- Rounded or sharp corners?
|
||||
|
||||
2. **Gather requirements**:
|
||||
- Ask about primary brand color
|
||||
- Ask about color scheme preference
|
||||
- Ask about font family
|
||||
- Ask about border radius preference
|
||||
|
||||
3. **Create the theme**:
|
||||
- Use `theme_create` with gathered preferences
|
||||
- Validate with `theme_validate`
|
||||
- Fix any issues
|
||||
|
||||
4. **Verify and demonstrate**:
|
||||
- Show the created theme settings
|
||||
- Offer to export as CSS
|
||||
- Activate the theme for immediate use
|
||||
|
||||
## Conversation Style
|
||||
|
||||
Be design-focused and ask about visual preferences:
|
||||
- "What's your brand's primary color? I can use any Mantine color like blue, indigo, violet, or a custom hex code."
|
||||
- "Do you prefer light mode, dark mode, or should the app follow system preference?"
|
||||
- "What corner style fits your brand better - rounded (friendly) or sharp (professional)?"
|
||||
|
||||
## Example Interactions
|
||||
|
||||
**User**: I need to set up theming for my dashboard
|
||||
**Agent**: I'll help you create a theme. Let me ask a few questions about your brand...
|
||||
- Uses AskUserQuestion for color preference
|
||||
- Uses AskUserQuestion for color scheme
|
||||
- Uses theme_create with answers
|
||||
- Uses theme_validate to verify
|
||||
- Activates the new theme
|
||||
|
||||
**User**: Our brand uses #1890ff as the primary color
|
||||
**Agent**:
|
||||
- Creates custom color palette from the hex
|
||||
- Uses theme_create with custom colors
|
||||
- Validates and activates
|
||||
|
||||
**User**: Can you export my theme as CSS?
|
||||
**Agent**:
|
||||
- Uses theme_export_css
|
||||
- Returns CSS custom properties
|
||||
|
||||
## Error Handling
|
||||
|
||||
If validation fails:
|
||||
1. Show the specific errors clearly
|
||||
2. Suggest fixes based on the error
|
||||
3. Offer to recreate with corrections
|
||||
|
||||
Common issues:
|
||||
- Invalid color names → suggest valid Mantine colors
|
||||
- Invalid enum values → show allowed options
|
||||
- Missing required fields → provide defaults
|
||||
144
plugins/viz-platform/claude-md-integration.md
Normal file
144
plugins/viz-platform/claude-md-integration.md
Normal file
@@ -0,0 +1,144 @@
|
||||
# viz-platform CLAUDE.md Integration
|
||||
|
||||
Add this snippet to your project's CLAUDE.md to enable viz-platform capabilities.
|
||||
|
||||
## Integration Snippet
|
||||
|
||||
```markdown
|
||||
## Visualization (viz-platform)
|
||||
|
||||
This project uses viz-platform for Dash Mantine Components dashboards.
|
||||
|
||||
### Available Commands
|
||||
- `/component {name}` - Inspect DMC component props
|
||||
- `/chart {type}` - Create Plotly charts (line, bar, scatter, pie, area, histogram, box, heatmap, sunburst, treemap)
|
||||
- `/dashboard {template}` - Create layouts (basic, sidebar, tabs, split)
|
||||
- `/theme {name}` - Apply a theme
|
||||
- `/theme-new {name}` - Create custom theme
|
||||
- `/theme-css {name}` - Export theme as CSS
|
||||
|
||||
### MCP Tools Available
|
||||
- **DMC**: list_components, get_component_props, validate_component
|
||||
- **Charts**: chart_create, chart_configure_interaction
|
||||
- **Layouts**: layout_create, layout_add_filter, layout_set_grid, layout_add_section, layout_get
|
||||
- **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
|
||||
|
||||
### Component Validation
|
||||
ALWAYS validate DMC components before use:
|
||||
1. Check props with `get_component_props(component_name)`
|
||||
2. Validate usage with `validate_component(component_name, props)`
|
||||
3. Fix any errors before proceeding
|
||||
|
||||
### Project Theme
|
||||
Theme: [YOUR_THEME_NAME or "default"]
|
||||
Color scheme: [light/dark]
|
||||
Primary color: [color name]
|
||||
```
|
||||
|
||||
## Cross-Plugin Configuration
|
||||
|
||||
If using with data-platform, add this section:
|
||||
|
||||
```markdown
|
||||
## Data + Visualization Workflow
|
||||
|
||||
### Data Loading (data-platform)
|
||||
- `/ingest {file}` - Load CSV, Parquet, or JSON
|
||||
- `/schema {table}` - View database schema
|
||||
- `/profile {data_ref}` - Statistical summary
|
||||
|
||||
### Visualization (viz-platform)
|
||||
- `/chart {type}` - Create charts from loaded data
|
||||
- `/dashboard {template}` - Build dashboard layouts
|
||||
|
||||
### Workflow Pattern
|
||||
1. Load data: `read_csv("data.csv")` → returns `data_ref`
|
||||
2. Create chart: `chart_create(data_ref="data_ref", ...)`
|
||||
3. Add to layout: `layout_add_section(chart_ref="...")`
|
||||
4. Apply theme: `theme_activate("my-theme")`
|
||||
```
|
||||
|
||||
## Agent Configuration
|
||||
|
||||
### Using theme-setup agent
|
||||
|
||||
When user mentions theming or brand colors:
|
||||
```markdown
|
||||
Use the theme-setup agent for:
|
||||
- Creating new themes with brand colors
|
||||
- Configuring typography and spacing
|
||||
- Exporting themes as CSS
|
||||
```
|
||||
|
||||
### Using layout-builder agent
|
||||
|
||||
When user wants dashboard structure:
|
||||
```markdown
|
||||
Use the layout-builder agent for:
|
||||
- Creating dashboard layouts
|
||||
- Adding filter components
|
||||
- Configuring responsive grids
|
||||
```
|
||||
|
||||
### Using component-check agent
|
||||
|
||||
For code review and debugging:
|
||||
```markdown
|
||||
Use the component-check agent for:
|
||||
- Validating DMC component usage
|
||||
- Fixing prop errors
|
||||
- Understanding component APIs
|
||||
```
|
||||
|
||||
## Example Project CLAUDE.md
|
||||
|
||||
```markdown
|
||||
# Project: Sales Dashboard
|
||||
|
||||
## Tech Stack
|
||||
- Backend: FastAPI
|
||||
- Frontend: Dash with Mantine Components
|
||||
- Data: PostgreSQL + pandas
|
||||
|
||||
## Data (data-platform)
|
||||
- Database: PostgreSQL with sales data
|
||||
- Key tables: orders, customers, products
|
||||
|
||||
## Visualization (viz-platform)
|
||||
- Theme: corporate (indigo primary, light mode)
|
||||
- Layout: sidebar with date and category filters
|
||||
- Charts: line (trends), bar (comparisons), pie (breakdown)
|
||||
|
||||
### Component Validation
|
||||
ALWAYS use component-check before rendering:
|
||||
- get_component_props first
|
||||
- validate_component after
|
||||
|
||||
### Dashboard Structure
|
||||
```
|
||||
Sidebar: Navigation links
|
||||
Header: Title + date range filter
|
||||
Main:
|
||||
- Row 1: KPI cards
|
||||
- Row 2: Line chart (sales over time)
|
||||
- Row 3: Bar chart (by category) + Pie chart (by region)
|
||||
```
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### MCP tools not available
|
||||
1. Check venv exists: `ls mcp-servers/viz-platform/.venv/`
|
||||
2. Rebuild if needed: `cd mcp-servers/viz-platform && python -m venv .venv && pip install -r requirements.txt`
|
||||
3. Restart Claude Code session
|
||||
|
||||
### Component validation fails
|
||||
1. Check DMC version matches registry
|
||||
2. Use `list_components()` to see available components
|
||||
3. Verify prop names are camelCase
|
||||
|
||||
### Charts not rendering
|
||||
1. Verify data_ref exists with `list_data()`
|
||||
2. Check column names match data
|
||||
3. Validate theme is active
|
||||
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