Template

Files

lmiranda b5d36865ee feat(plugins): add Visual Output headers to all other plugin commands

Add single-line visual headers to 66 command files across 10 plugins:
- clarity-assist (2 commands): 💬
- claude-config-maintainer (5 commands): ⚙️
- cmdb-assistant (11 commands): 🖥️
- code-sentinel (3 commands): 🔒
- contract-validator (5 commands): ✅
- data-platform (10 commands): 📊
- doc-guardian (5 commands): 📝
- git-flow (8 commands): 🔀
- pr-review (7 commands): 🔍
- viz-platform (10 commands): 🎨

Each command now displays a consistent header at execution start:
┌────────────────────────────────────────────────────────────────┐
│  [icon] PLUGIN-NAME · Command Description                       │
└────────────────────────────────────────────────────────────────┘

Addresses #275 (other plugin commands visual output)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-28 17:24:49 -05:00

3.0 KiB

Raw Blame History

description

description
Export a theme as CSS custom properties

Export Theme as CSS

Visual Output

When executing this command, display the plugin header:

┌──────────────────────────────────────────────────────────────────┐
│  🎨 VIZ-PLATFORM · Theme CSS Export                               │
└──────────────────────────────────────────────────────────────────┘

Then proceed with the export.

Export a theme's design tokens as CSS custom properties for use outside Dash.

Usage

/theme-css {name}

Arguments

name (required): Theme name to export

Examples

/theme-css dark
/theme-css corporate
/theme-css my-brand

Tool Mapping

This command uses the theme_export_css MCP tool:

theme_export_css(theme_name="corporate")

Output Example

:root {
  /* Colors */
  --mantine-color-scheme: light;
  --mantine-primary-color: indigo;
  --mantine-color-primary-0: #edf2ff;
  --mantine-color-primary-1: #dbe4ff;
  --mantine-color-primary-2: #bac8ff;
  --mantine-color-primary-3: #91a7ff;
  --mantine-color-primary-4: #748ffc;
  --mantine-color-primary-5: #5c7cfa;
  --mantine-color-primary-6: #4c6ef5;
  --mantine-color-primary-7: #4263eb;
  --mantine-color-primary-8: #3b5bdb;
  --mantine-color-primary-9: #364fc7;

  /* Typography */
  --mantine-font-family: Inter, sans-serif;
  --mantine-heading-font-family: Inter, sans-serif;
  --mantine-font-size-xs: 0.75rem;
  --mantine-font-size-sm: 0.875rem;
  --mantine-font-size-md: 1rem;
  --mantine-font-size-lg: 1.125rem;
  --mantine-font-size-xl: 1.25rem;

  /* Spacing */
  --mantine-spacing-xs: 0.625rem;
  --mantine-spacing-sm: 0.75rem;
  --mantine-spacing-md: 1rem;
  --mantine-spacing-lg: 1.25rem;
  --mantine-spacing-xl: 2rem;

  /* Border Radius */
  --mantine-radius-xs: 0.125rem;
  --mantine-radius-sm: 0.25rem;
  --mantine-radius-md: 0.5rem;
  --mantine-radius-lg: 1rem;
  --mantine-radius-xl: 2rem;

  /* Shadows */
  --mantine-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
  --mantine-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --mantine-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --mantine-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --mantine-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

Use Cases

External CSS Files

Include the exported CSS in non-Dash projects:

<link rel="stylesheet" href="theme-tokens.css">

Design Handoff

Share design tokens with designers or other teams.

Documentation

Generate theme documentation for style guides.

Other Frameworks

Use Mantine-compatible tokens in React, Vue, or other projects.

Workflow

User invokes: /theme-css corporate
Tool exports: Theme tokens as CSS
User can: Save to file or copy to clipboard

/theme {name} - Apply a theme
/theme-new {name} - Create a new theme

3.0 KiB Raw Blame History