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:
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
|
||||
Reference in New Issue
Block a user