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>

plugins/viz-platform/commands/component.md

@@ -4,19 +4,19 @@ description: Inspect Dash Mantine Component props and validation
 
 # Inspect Component
 
+## Skills to Load
+- skills/mcp-tools-reference.md
+- skills/dmc-components.md
+
 ## Visual Output
 
-When executing this command, display the plugin header:
-
 ```
-┌──────────────────────────────────────────────────────────────────┐
-│  🎨 VIZ-PLATFORM · Component Inspector                            │
-└──────────────────────────────────────────────────────────────────┘
++------------------------------------------------------------------+
+|  VIZ-PLATFORM - Component Inspector                              |
++------------------------------------------------------------------+
 ```
 
-Then proceed with the inspection.
-
-Inspect a Dash Mantine Component's available props, types, and defaults.
+Inspect a DMC component's props, types, and defaults.
 
 ## Usage
 
@@ -28,145 +28,14 @@ Inspect a Dash Mantine Component's available props, types, and defaults.
 
 - `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")
+list_components(category="inputs")
+validate_component(component="Button", props={"variant": "filled"})
 ```
 
-## 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