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>
This commit is contained in:
144
plugins/viz-platform/commands/accessibility-check.md
Normal file
144
plugins/viz-platform/commands/accessibility-check.md
Normal file
@@ -0,0 +1,144 @@
|
||||
---
|
||||
description: Validate color accessibility for color blind users
|
||||
---
|
||||
|
||||
# Accessibility Check
|
||||
|
||||
Validate theme or chart colors for color blind accessibility, checking contrast ratios and suggesting alternatives.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/accessibility-check {target}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `target` (optional): "theme" or "chart" - defaults to active theme
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/accessibility-check
|
||||
/accessibility-check theme
|
||||
/accessibility-check chart
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `accessibility_validate_colors` MCP tool:
|
||||
|
||||
```python
|
||||
accessibility_validate_colors(
|
||||
colors=["#228be6", "#40c057", "#fa5252"], # Colors to check
|
||||
check_types=["deuteranopia", "protanopia", "tritanopia"],
|
||||
min_contrast_ratio=4.5 # WCAG AA standard
|
||||
)
|
||||
```
|
||||
|
||||
Or validate a full theme:
|
||||
```python
|
||||
accessibility_validate_theme(
|
||||
theme_name="corporate"
|
||||
)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **User invokes**: `/accessibility-check theme`
|
||||
2. **Tool analyzes**: Theme color palette
|
||||
3. **Tool simulates**: Color perception for each deficiency type
|
||||
4. **Tool checks**: Contrast ratios between color pairs
|
||||
5. **Tool returns**: Issues found and alternative suggestions
|
||||
|
||||
## Color Blindness Types
|
||||
|
||||
| Type | Affected Colors | Population |
|
||||
|------|-----------------|------------|
|
||||
| **Deuteranopia** | Red-Green (green-blind) | ~6% males, 0.4% females |
|
||||
| **Protanopia** | Red-Green (red-blind) | ~2.5% males, 0.05% females |
|
||||
| **Tritanopia** | Blue-Yellow | ~0.01% total |
|
||||
|
||||
## Output Example
|
||||
|
||||
```json
|
||||
{
|
||||
"theme_name": "corporate",
|
||||
"overall_score": "B",
|
||||
"issues": [
|
||||
{
|
||||
"type": "contrast",
|
||||
"severity": "warning",
|
||||
"colors": ["#fa5252", "#40c057"],
|
||||
"affected_by": ["deuteranopia", "protanopia"],
|
||||
"message": "Red and green may be indistinguishable for red-green color blind users",
|
||||
"suggestion": "Use blue (#228be6) instead of green to differentiate from red"
|
||||
},
|
||||
{
|
||||
"type": "contrast_ratio",
|
||||
"severity": "error",
|
||||
"colors": ["#fab005", "#ffffff"],
|
||||
"ratio": 2.1,
|
||||
"required": 4.5,
|
||||
"message": "Insufficient contrast for WCAG AA compliance",
|
||||
"suggestion": "Darken yellow to #e6a200 for ratio of 4.5+"
|
||||
}
|
||||
],
|
||||
"recommendations": [
|
||||
"Add patterns or shapes to distinguish data series, not just color",
|
||||
"Include labels directly on chart elements",
|
||||
"Consider using a color-blind safe palette"
|
||||
],
|
||||
"safe_palettes": {
|
||||
"categorical": ["#4477AA", "#EE6677", "#228833", "#CCBB44", "#66CCEE", "#AA3377", "#BBBBBB"],
|
||||
"sequential": ["#FEE0D2", "#FC9272", "#DE2D26"],
|
||||
"diverging": ["#4575B4", "#FFFFBF", "#D73027"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## WCAG Contrast Standards
|
||||
|
||||
| Level | Ratio | Use Case |
|
||||
|-------|-------|----------|
|
||||
| AA (normal text) | 4.5:1 | Body text, labels |
|
||||
| AA (large text) | 3:1 | Headings, 14pt+ bold |
|
||||
| AAA (enhanced) | 7:1 | Highest accessibility |
|
||||
|
||||
## Color-Blind Safe Palettes
|
||||
|
||||
The tool can suggest complete color-blind safe palettes:
|
||||
|
||||
### IBM Design Colors
|
||||
Designed for accessibility:
|
||||
```
|
||||
#648FFF #785EF0 #DC267F #FE6100 #FFB000
|
||||
```
|
||||
|
||||
### Tableau Colorblind 10
|
||||
Industry-standard accessible palette:
|
||||
```
|
||||
#006BA4 #FF800E #ABABAB #595959 #5F9ED1
|
||||
#C85200 #898989 #A2C8EC #FFBC79 #CFCFCF
|
||||
```
|
||||
|
||||
### Okabe-Ito
|
||||
Optimized for all types of color blindness:
|
||||
```
|
||||
#E69F00 #56B4E9 #009E73 #F0E442 #0072B2
|
||||
#D55E00 #CC79A7 #000000
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/theme-new {name}` - Create accessible theme from the start
|
||||
- `/theme-validate {name}` - General theme validation
|
||||
- `/chart {type}` - Create chart (check colors after)
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Don't rely on color alone** - Use shapes, patterns, or labels
|
||||
2. **Test with simulation** - View your visualizations through color blindness simulators
|
||||
3. **Use sufficient contrast** - Minimum 4.5:1 for text, 3:1 for large elements
|
||||
4. **Limit color count** - Fewer colors = easier to distinguish
|
||||
5. **Use semantic colors** - Blue for information, red for errors (with icons)
|
||||
193
plugins/viz-platform/commands/breakpoints.md
Normal file
193
plugins/viz-platform/commands/breakpoints.md
Normal file
@@ -0,0 +1,193 @@
|
||||
---
|
||||
description: Configure responsive breakpoints for dashboard layouts
|
||||
---
|
||||
|
||||
# Configure Breakpoints
|
||||
|
||||
Configure responsive breakpoints for a layout to support mobile-first design across different screen sizes.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/breakpoints {layout_ref}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `layout_ref` (required): Layout name to configure breakpoints for
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/breakpoints my-dashboard
|
||||
/breakpoints sales-report
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `layout_set_breakpoints` MCP tool:
|
||||
|
||||
```python
|
||||
layout_set_breakpoints(
|
||||
layout_ref="my-dashboard",
|
||||
breakpoints={
|
||||
"xs": {"cols": 1, "spacing": "xs"}, # < 576px (mobile)
|
||||
"sm": {"cols": 2, "spacing": "sm"}, # >= 576px (large mobile)
|
||||
"md": {"cols": 6, "spacing": "md"}, # >= 768px (tablet)
|
||||
"lg": {"cols": 12, "spacing": "md"}, # >= 992px (desktop)
|
||||
"xl": {"cols": 12, "spacing": "lg"} # >= 1200px (large desktop)
|
||||
},
|
||||
mobile_first=True
|
||||
)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **User invokes**: `/breakpoints my-dashboard`
|
||||
2. **Agent asks**: Which breakpoints to customize? (shows current settings)
|
||||
3. **Agent asks**: Mobile column count? (xs, typically 1-2)
|
||||
4. **Agent asks**: Tablet column count? (md, typically 4-6)
|
||||
5. **Agent applies**: Breakpoint configuration
|
||||
6. **Agent returns**: Complete responsive configuration
|
||||
|
||||
## 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
|
||||
|
||||
```python
|
||||
# Mobile-first example
|
||||
{
|
||||
"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:
|
||||
- Define base styles for `xl` (desktop)
|
||||
- Override for smaller screens
|
||||
- Traditional "desktop-first" approach
|
||||
|
||||
## Grid Configuration per Breakpoint
|
||||
|
||||
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)
|
||||
```python
|
||||
{
|
||||
"xs": {"cols": 1, "spacing": "xs"}, # Full-width cards
|
||||
"sm": {"cols": 2, "spacing": "sm"}, # 2 cards per row
|
||||
"md": {"cols": 3, "spacing": "md"}, # 3 cards per row
|
||||
"lg": {"cols": 4, "spacing": "md"}, # 4 cards per row
|
||||
"xl": {"cols": 6, "spacing": "lg"} # 6 cards per row
|
||||
}
|
||||
```
|
||||
|
||||
### Data Table
|
||||
```python
|
||||
{
|
||||
"xs": {"cols": 1, "scroll": true}, # Horizontal scroll
|
||||
"md": {"cols": 1, "scroll": false}, # Full table visible
|
||||
"lg": {"cols": 1} # Same as md
|
||||
}
|
||||
```
|
||||
|
||||
### Form Layout
|
||||
```python
|
||||
{
|
||||
"xs": {"cols": 1}, # Single column
|
||||
"md": {"cols": 2}, # Two columns
|
||||
"lg": {"cols": 3} # Three columns
|
||||
}
|
||||
```
|
||||
|
||||
### Sidebar Layout
|
||||
```python
|
||||
{
|
||||
"xs": {"sidebar": "hidden"}, # No sidebar on mobile
|
||||
"md": {"sidebar": "collapsed"}, # Icon-only sidebar
|
||||
"lg": {"sidebar": "expanded"} # Full sidebar
|
||||
}
|
||||
```
|
||||
|
||||
## Component Span
|
||||
|
||||
Control how many columns a component spans at each breakpoint:
|
||||
|
||||
```python
|
||||
# A chart that spans full width on mobile, half on desktop
|
||||
{
|
||||
"component": "sales-chart",
|
||||
"span": {
|
||||
"xs": 1, # Full width (1/1)
|
||||
"md": 3, # Half width (3/6)
|
||||
"lg": 6 # Half width (6/12)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## DMC Grid Integration
|
||||
|
||||
This maps to Dash Mantine Components Grid:
|
||||
|
||||
```python
|
||||
dmc.Grid(
|
||||
children=[
|
||||
dmc.GridCol(
|
||||
children=[chart],
|
||||
span={"base": 12, "sm": 6, "lg": 4} # Responsive span
|
||||
)
|
||||
],
|
||||
gutter="md"
|
||||
)
|
||||
```
|
||||
|
||||
## Output
|
||||
|
||||
```json
|
||||
{
|
||||
"layout_ref": "my-dashboard",
|
||||
"breakpoints": {
|
||||
"xs": {"cols": 1, "spacing": "xs", "min_width": "0px"},
|
||||
"sm": {"cols": 2, "spacing": "sm", "min_width": "576px"},
|
||||
"md": {"cols": 6, "spacing": "md", "min_width": "768px"},
|
||||
"lg": {"cols": 12, "spacing": "md", "min_width": "992px"},
|
||||
"xl": {"cols": 12, "spacing": "lg", "min_width": "1200px"}
|
||||
},
|
||||
"mobile_first": true,
|
||||
"css_media_queries": [
|
||||
"@media (min-width: 576px) { ... }",
|
||||
"@media (min-width: 768px) { ... }",
|
||||
"@media (min-width: 992px) { ... }",
|
||||
"@media (min-width: 1200px) { ... }"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/dashboard {template}` - Create layout with default breakpoints
|
||||
- `/layout-set-grid` - Configure grid without responsive settings
|
||||
- `/theme {name}` - Theme includes default spacing values
|
||||
114
plugins/viz-platform/commands/chart-export.md
Normal file
114
plugins/viz-platform/commands/chart-export.md
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
description: Export a Plotly chart to PNG, SVG, or PDF format
|
||||
---
|
||||
|
||||
# Export Chart
|
||||
|
||||
Export a Plotly chart to static image formats for sharing, embedding, or printing.
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
/chart-export {format}
|
||||
```
|
||||
|
||||
## Arguments
|
||||
|
||||
- `format` (required): Output format - one of: png, svg, pdf
|
||||
|
||||
## Examples
|
||||
|
||||
```
|
||||
/chart-export png
|
||||
/chart-export svg
|
||||
/chart-export pdf
|
||||
```
|
||||
|
||||
## Tool Mapping
|
||||
|
||||
This command uses the `chart_export` MCP tool:
|
||||
|
||||
```python
|
||||
chart_export(
|
||||
figure=figure_json, # Plotly figure JSON from chart_create
|
||||
format="png", # Output format: png, svg, pdf
|
||||
width=1200, # Optional: image width in pixels
|
||||
height=800, # Optional: image height in pixels
|
||||
scale=2, # Optional: resolution scale factor
|
||||
output_path=None # Optional: save to file path
|
||||
)
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **User invokes**: `/chart-export png`
|
||||
2. **Agent asks**: Which chart to export? (if multiple charts in context)
|
||||
3. **Agent asks**: Image dimensions? (optional, uses chart defaults)
|
||||
4. **Agent exports**: Chart with `chart_export` tool
|
||||
5. **Agent returns**: Base64 image data or file path
|
||||
|
||||
## Output Formats
|
||||
|
||||
| Format | Best For | File Size |
|
||||
|--------|----------|-----------|
|
||||
| `png` | Web, presentations, general use | Medium |
|
||||
| `svg` | Scalable graphics, editing | Small |
|
||||
| `pdf` | Print, documents, archival | Large |
|
||||
|
||||
## Resolution Options
|
||||
|
||||
### Width & Height
|
||||
Specify exact pixel dimensions:
|
||||
```python
|
||||
chart_export(figure, format="png", width=1920, height=1080)
|
||||
```
|
||||
|
||||
### Scale Factor
|
||||
Increase resolution for high-DPI displays:
|
||||
```python
|
||||
chart_export(figure, format="png", scale=3) # 3x resolution
|
||||
```
|
||||
|
||||
Common scale values:
|
||||
- `1` - Standard resolution (72 DPI)
|
||||
- `2` - Retina/HiDPI (144 DPI)
|
||||
- `3` - Print quality (216 DPI)
|
||||
- `4` - High-quality print (288 DPI)
|
||||
|
||||
## Output Options
|
||||
|
||||
### Return as Base64
|
||||
Default behavior - returns base64-encoded image data:
|
||||
```python
|
||||
result = chart_export(figure, format="png")
|
||||
# result["image_data"] contains base64 string
|
||||
```
|
||||
|
||||
### Save to File
|
||||
Specify output path to save directly:
|
||||
```python
|
||||
chart_export(figure, format="png", output_path="/path/to/chart.png")
|
||||
# result["file_path"] contains the saved path
|
||||
```
|
||||
|
||||
## Requirements
|
||||
|
||||
This tool requires the `kaleido` package for rendering:
|
||||
```bash
|
||||
pip install kaleido
|
||||
```
|
||||
|
||||
Kaleido is a cross-platform library that renders Plotly figures without a browser.
|
||||
|
||||
## Error Handling
|
||||
|
||||
Common issues:
|
||||
- **Kaleido not installed**: Install with `pip install kaleido`
|
||||
- **Invalid figure**: Ensure figure is valid Plotly JSON
|
||||
- **Permission denied**: Check write permissions for output path
|
||||
|
||||
## Related Commands
|
||||
|
||||
- `/chart {type}` - Create a chart
|
||||
- `/theme {name}` - Apply theme before export
|
||||
- `/dashboard` - Create layout containing charts
|
||||
Reference in New Issue
Block a user