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:
@@ -1,178 +1,45 @@
|
||||
---
|
||||
description: Interactive setup wizard for viz-platform plugin - configures MCP server and theme preferences
|
||||
description: Interactive setup wizard for viz-platform plugin
|
||||
---
|
||||
|
||||
# Viz-Platform Setup Wizard
|
||||
|
||||
## Visual Output
|
||||
|
||||
When executing this command, display the plugin header:
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 🎨 VIZ-PLATFORM · Setup Wizard │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
+------------------------------------------------------------------+
|
||||
| VIZ-PLATFORM - Setup Wizard |
|
||||
+------------------------------------------------------------------+
|
||||
```
|
||||
|
||||
Then proceed with the setup.
|
||||
Sets up viz-platform with DMC validation and theming.
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
**Note:** Uses Bash/Read/Write tools - NOT MCP tools. Restart session after setup.
|
||||
|
||||
## Phase 1: Environment Validation
|
||||
|
||||
### Step 1.1: Check Python Version
|
||||
|
||||
Check Python 3.10+ and DMC installation:
|
||||
```bash
|
||||
python3 --version
|
||||
python3 -c "import dash_mantine_components as dmc; print(dmc.__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
|
||||
|
||||
Locate and create venv if missing:
|
||||
```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"
|
||||
cd /path/to/mcp-servers/viz-platform && python3 -m venv .venv && .venv/bin/pip install -r requirements.txt
|
||||
```
|
||||
|
||||
### 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
|
||||
```
|
||||
|
||||
---
|
||||
Ask user about color scheme and primary color. Save to `~/.config/claude/viz-platform.env`.
|
||||
|
||||
## Phase 4: Validation
|
||||
|
||||
### Step 4.1: Verify MCP Server
|
||||
Verify MCP server loads, display summary, prompt session restart.
|
||||
|
||||
```bash
|
||||
cd /path/to/mcp-servers/viz-platform && .venv/bin/python -c "from mcp_server.server import VizPlatformMCPServer; print('MCP Server OK')"
|
||||
```
|
||||
## Related Commands
|
||||
|
||||
### 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 |
|
||||
- `/component {name}` - Inspect component props
|
||||
- `/chart {type}` - Create a chart
|
||||
|
||||
Reference in New Issue
Block a user