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.1 KiB

Raw Blame History

Theming System

Design Tokens

Themes define design tokens for consistent styling across components.

Theme Properties

Category	Properties
Colors	`primary_color`, `color_scheme`, `colors`
Typography	`font_family`, `heading_font_family`
Spacing	`border_radius`, `spacing_scale`

Color Scheme

light - Light background, dark text
dark - Dark background, light text

Border Radius Scale

Size	Value
xs	0.125rem
sm	0.25rem
md	0.5rem
lg	1rem
xl	2rem

Mantine Color Palette

Available primary colors:

blue, cyan, teal, green, lime
yellow, orange, red, pink, grape
violet, indigo, gray, dark

Each color has 10 shades (0-9), where 5 is the primary shade.

Custom Color Definition

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
    ]
}

CSS Custom Properties

Exported themes use Mantine CSS variable naming:

:root {
  /* Colors */
  --mantine-color-scheme: light;
  --mantine-primary-color: indigo;
  --mantine-color-primary-0: #edf2ff;
  --mantine-color-primary-5: #5c7cfa;
  --mantine-color-primary-9: #364fc7;

  /* Typography */
  --mantine-font-family: Inter, sans-serif;
  --mantine-font-size-xs: 0.75rem;
  --mantine-font-size-md: 1rem;

  /* Spacing */
  --mantine-spacing-xs: 0.625rem;
  --mantine-spacing-md: 1rem;

  /* Border Radius */
  --mantine-radius-sm: 0.25rem;
  --mantine-radius-md: 0.5rem;

  /* Shadows */
  --mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --mantine-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Theme Inheritance

Create themes based on existing ones:

theme_extend(
    base_theme="dark",
    name="dark-corporate",
    overrides={"primary_color": "indigo"}
)

Built-in Themes

Theme	Description
`light`	Mantine default light mode
`dark`	Mantine default dark mode

2.1 KiB Raw Blame History