Template

Files

lmiranda 5152cda161 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>

2026-01-30 16:59:26 -05:00

2.2 KiB

Raw Blame History

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

{
    "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)

{
    "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

{
    "xs": {"cols": 1, "scroll": true},
    "md": {"cols": 1, "scroll": false},
    "lg": {"cols": 1}
}

Form Layout

{
    "xs": {"cols": 1},
    "md": {"cols": 2},
    "lg": {"cols": 3}
}

Sidebar Layout

{
    "xs": {"sidebar": "hidden"},
    "md": {"sidebar": "collapsed"},
    "lg": {"sidebar": "expanded"}
}

Component Span

Control how many columns a component spans:

{
    "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:

@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 992px) { ... }
@media (min-width: 1200px) { ... }

2.2 KiB Raw Blame History