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/skills/responsive-design.md

@@ -0,0 +1,104 @@
+# Responsive Design
+
+## Breakpoint Sizes
+
+| Name | Min Width | Common Devices |
+|------|-----------|----------------|
+| `xs` | 0px | Small phones (portrait) |
+| `sm` | 576px | Large phones, small tablets |
+| `md` | 768px | Tablets (portrait) |
+| `lg` | 992px | Tablets (landscape), laptops |
+| `xl` | 1200px | Desktops, large screens |
+
+## Mobile-First Approach
+
+When `mobile_first=True` (default), styles cascade up:
+- Define base styles for `xs` (mobile)
+- Override only what changes at larger breakpoints
+- Smaller CSS footprint, better performance
+
+```python
+{
+    "xs": {"cols": 1},      # Stack everything on mobile
+    "md": {"cols": 6},      # Two-column on tablet
+    "lg": {"cols": 12}      # Full grid on desktop
+}
+```
+
+When `mobile_first=False`, styles cascade down (desktop-first).
+
+## Grid Configuration
+
+Each breakpoint can configure:
+
+| Property | Description | Values |
+|----------|-------------|--------|
+| `cols` | Grid column count | 1-24 |
+| `spacing` | Gap between items | xs, sm, md, lg, xl |
+| `gutter` | Outer padding | xs, sm, md, lg, xl |
+| `grow` | Items grow to fill | true, false |
+
+## Common Patterns
+
+### Dashboard (Charts & Filters)
+```python
+{
+    "xs": {"cols": 1, "spacing": "xs"},
+    "sm": {"cols": 2, "spacing": "sm"},
+    "md": {"cols": 3, "spacing": "md"},
+    "lg": {"cols": 4, "spacing": "md"},
+    "xl": {"cols": 6, "spacing": "lg"}
+}
+```
+
+### Data Table
+```python
+{
+    "xs": {"cols": 1, "scroll": true},
+    "md": {"cols": 1, "scroll": false},
+    "lg": {"cols": 1}
+}
+```
+
+### Form Layout
+```python
+{
+    "xs": {"cols": 1},
+    "md": {"cols": 2},
+    "lg": {"cols": 3}
+}
+```
+
+### Sidebar Layout
+```python
+{
+    "xs": {"sidebar": "hidden"},
+    "md": {"sidebar": "collapsed"},
+    "lg": {"sidebar": "expanded"}
+}
+```
+
+## Component Span
+
+Control how many columns a component spans:
+
+```python
+{
+    "component": "sales-chart",
+    "span": {
+        "xs": 1,     # Full width (1/1)
+        "md": 3,     # Half width (3/6)
+        "lg": 6      # Half width (6/12)
+    }
+}
+```
+
+## CSS Media Queries
+
+Generated for each breakpoint:
+```css
+@media (min-width: 576px) { ... }
+@media (min-width: 768px) { ... }
+@media (min-width: 992px) { ... }
+@media (min-width: 1200px) { ... }
+```