personal-projects/leo-claude-mktplace
Template
0
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
b492a137021ced3de205ef79bd9c470f16b77fef
leo-claude-mktplace/plugins/viz-platform/README.md
lmiranda 9698e8724d feat(plugins): implement Sprint 4 commands (#241-#258) 
Sprint 4 - Plugin Commands implementation adding 18 new user-facing
commands across 8 plugins as part of V5.2.0 Plugin Enhancements.

**projman:**
- #241: /sprint-diagram - Mermaid visualization of sprint issues

**pr-review:**
- #242: Confidence threshold config (PR_REVIEW_CONFIDENCE_THRESHOLD)
- #243: /pr-diff - Formatted diff with inline review comments

**data-platform:**
- #244: /data-quality - DataFrame quality checks (nulls, duplicates, outliers)
- #245: /lineage-viz - dbt lineage as Mermaid diagrams
- #246: /dbt-test - Formatted dbt test runner

**viz-platform:**
- #247: /chart-export - Export charts to PNG/SVG/PDF via kaleido
- #248: /accessibility-check - Color blind validation (WCAG contrast)
- #249: /breakpoints - Responsive layout configuration

**contract-validator:**
- #250: /dependency-graph - Plugin dependency visualization

**doc-guardian:**
- #251: /changelog-gen - Generate changelog from conventional commits
- #252: /doc-coverage - Documentation coverage metrics
- #253: /stale-docs - Flag outdated documentation

**claude-config-maintainer:**
- #254: /config-diff - Track CLAUDE.md changes over time
- #255: /config-lint - 31 lint rules for CLAUDE.md best practices

**cmdb-assistant:**
- #256: /cmdb-topology - Infrastructure topology diagrams
- #257: /change-audit - NetBox audit trail queries
- #258: /ip-conflicts - Detect IP conflicts and overlaps

Closes #241, #242, #243, #244, #245, #246, #247, #248, #249,
#250, #251, #252, #253, #254, #255, #256, #257, #258

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 12:02:26 -05:00

239 lines
6.8 KiB
Markdown
Raw Blame History

# viz-platform Plugin
Visualization tools with Dash Mantine Components validation, Plotly charts, and theming for Claude Code.
## Features
- **DMC Validation**: Prevent prop hallucination with version-locked component registry
- **Chart Creation**: Plotly charts with automatic theme token application
- **Layout Builder**: Dashboard layouts with filters, grids, and responsive design
- **Theme System**: Create, extend, and export design tokens
## Installation
This plugin is part of the leo-claude-mktplace. Install via:
```bash
# From marketplace
claude plugins install leo-claude-mktplace/viz-platform
# Setup MCP server venv
cd ~/.claude/plugins/marketplaces/leo-claude-mktplace/mcp-servers/viz-platform
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
```
## Configuration
### System-Level (Optional)
Create `~/.config/claude/viz-platform.env` for default theme preferences:
```env
VIZ_PLATFORM_COLOR_SCHEME=light
VIZ_PLATFORM_PRIMARY_COLOR=blue
```
### Project-Level (Optional)
Add to project `.env` for project-specific settings:
```env
VIZ_PLATFORM_THEME=my-custom-theme
DMC_VERSION=0.14.7
```
## Commands
| Command | Description |
|---------|-------------|
| `/initial-setup` | Interactive setup wizard for DMC and theme preferences |
| `/component {name}` | Inspect component props and validation |
| `/chart {type}` | Create a Plotly chart |
| `/chart-export {format}` | Export chart to PNG, SVG, or PDF |
| `/dashboard {template}` | Create a dashboard layout |
| `/breakpoints {layout}` | Configure responsive breakpoints |
| `/accessibility-check` | Validate colors for color blind users |
| `/theme {name}` | Apply an existing theme |
| `/theme-new {name}` | Create a new custom theme |
| `/theme-css {name}` | Export theme as CSS |
## Agents
| Agent | Description |
|-------|-------------|
| `theme-setup` | Design-focused theme creation specialist |
| `layout-builder` | Dashboard layout and filter specialist |
| `component-check` | Strict component validation specialist |
## Tool Categories
### DMC Validation (3 tools)
Prevent invalid component props before runtime.
| Tool | Description |
|------|-------------|
| `list_components` | List available components by category |
| `get_component_props` | Get detailed prop specifications |
| `validate_component` | Validate a component configuration |
### Charts (3 tools)
Create Plotly charts with theme integration.
| Tool | Description |
|------|-------------|
| `chart_create` | Create a chart (line, bar, scatter, pie, etc.) |
| `chart_configure_interaction` | Configure chart interactivity |
| `chart_export` | Export chart to PNG, SVG, or PDF |
### Layouts (6 tools)
Build dashboard structures with filters and grids.
| Tool | Description |
|------|-------------|
| `layout_create` | Create a layout structure |
| `layout_add_filter` | Add filter components |
| `layout_set_grid` | Configure responsive grid |
| `layout_set_breakpoints` | Configure responsive breakpoints (xs-xl) |
| `layout_add_section` | Add content sections |
| `layout_get` | Retrieve layout details |
### Accessibility (3 tools)
Validate colors for accessibility and color blindness.
| Tool | Description |
|------|-------------|
| `accessibility_validate_colors` | Check colors for color blind accessibility |
| `accessibility_validate_theme` | Validate a theme's color accessibility |
| `accessibility_suggest_alternative` | Suggest accessible color alternatives |
### Themes (6 tools)
Manage design tokens and styling.
| Tool | Description |
|------|-------------|
| `theme_create` | Create a new theme |
| `theme_extend` | Extend an existing theme |
| `theme_validate` | Validate theme configuration |
| `theme_export_css` | Export as CSS custom properties |
| `theme_list` | List available themes |
| `theme_activate` | Set the active theme |
### Pages (5 tools)
Create full Dash app configurations.
| Tool | Description |
|------|-------------|
| `page_create` | Create a page structure |
| `page_add_navbar` | Add navigation bar |
| `page_set_auth` | Configure authentication |
| `page_list` | List pages |
| `page_get_app_config` | Get full app configuration |
## Component Validation
The key differentiator of viz-platform is the component registry system:
```python
# Before writing component code
get_component_props("Button")
# Returns: all valid props with types, enums, defaults
# After writing code
validate_component("Button", {"variant": "filled", "color": "blue"})
# Returns: {valid: true} or {valid: false, errors: [...]}
```
This prevents common DMC mistakes:
- Prop typos (`colour` vs `color`)
- Invalid enum values (`size="large"` vs `size="lg"`)
- Wrong case (`fullwidth` vs `fullWidth`)
## Example Workflow
```
/component Button
# → Shows all Button props with types and defaults
/theme-new corporate
# → Creates theme with brand colors
/chart bar
# → Creates bar chart with theme colors
/dashboard sidebar
# → Creates sidebar layout with filters
/theme-css corporate
# → Exports theme as CSS for external use
```
## Cross-Plugin Integration
viz-platform works seamlessly with data-platform:
1. **Load data** with data-platform: `/ingest sales.csv`
2. **Create chart** with viz-platform: `/chart line` using the data_ref
3. **Build layout** with viz-platform: `/dashboard` with filters
4. **Export** complete dashboard structure
## Chart Types
| Type | Best For |
|------|----------|
| `line` | Time series, trends |
| `bar` | Comparisons, categories |
| `scatter` | Correlations, distributions |
| `pie` | Part-to-whole |
| `area` | Cumulative trends |
| `histogram` | Frequency distributions |
| `box` | Statistical distributions |
| `heatmap` | Matrix correlations |
| `sunburst` | Hierarchical data |
| `treemap` | Hierarchical proportions |
## Layout Templates
| Template | Best For |
|----------|----------|
| `basic` | Simple dashboards, reports |
| `sidebar` | Navigation-heavy apps |
| `tabs` | Multi-page dashboards |
| `split` | Comparisons, master-detail |
## Responsive Breakpoints
The plugin supports mobile-first responsive design with standard breakpoints:
| Breakpoint | Min Width | Description |
|------------|-----------|-------------|
| `xs` | 0px | Extra small (mobile portrait) |
| `sm` | 576px | Small (mobile landscape) |
| `md` | 768px | Medium (tablet) |
| `lg` | 992px | Large (desktop) |
| `xl` | 1200px | Extra large (large desktop) |
Example:
```
/breakpoints my-dashboard
# Configure cols, spacing per breakpoint
```
## Color Accessibility
The plugin validates colors for color blindness:
- **Deuteranopia** (green-blind) - 6% of males
- **Protanopia** (red-blind) - 2.5% of males
- **Tritanopia** (blue-blind) - 0.01% of population
Includes WCAG contrast ratio checking and accessible palette suggestions.
## Requirements
- Python 3.10+
- dash-mantine-components >= 0.14.0
- plotly >= 5.18.0
- dash >= 2.14.0
- kaleido >= 0.2.1 (for chart export)
Reference in New Issue View Git Blame Copy Permalink