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

Raw Blame History

description

description
Inspect Dash Mantine Component props and validation

Inspect Component

Visual Output

When executing this command, display the plugin header:

┌──────────────────────────────────────────────────────────────────┐
│  🎨 VIZ-PLATFORM · Component Inspector                            │
└──────────────────────────────────────────────────────────────────┘

Then proceed with the inspection.

Inspect a Dash Mantine Component's available props, types, and defaults.

Usage

/component {name}

Arguments

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:

get_component_props(component="Button")

Output Example

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

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:

validate_component(
    component="Button",
    props={
        "variant": "filled",
        "color": "blue",
        "size": "lg",
        "children": "Click me"
    }
)

Returns:

{
  "valid": true,
  "errors": [],
  "warnings": []
}

Or with errors:

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

/chart {type} - Create charts
/dashboard {template} - Create layouts

3.8 KiB Raw Blame History