lmiranda
5152cda161
Extract shared knowledge from 10 commands into 7 reusable skills: - mcp-tools-reference.md: All viz-platform MCP tool signatures - theming-system.md: Theme tokens, CSS variables, color palettes - accessibility-rules.md: WCAG contrast, color-blind safe palettes - dmc-components.md: DMC categories, validation, common props - responsive-design.md: Breakpoints, mobile-first, grid config - chart-types.md: Plotly chart types, export formats, resolution - layout-templates.md: Dashboard templates, filter types All commands now reference skills via "Skills to Load" section. Commands reduced from 1396 lines total to 427 lines (69% reduction). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
98 lines
2.0 KiB
Markdown
98 lines
2.0 KiB
Markdown
# Dash Mantine Components Reference
|
|
|
|
## 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 |
|
|
|
|
## Common Props
|
|
|
|
Most components share these props:
|
|
|
|
| Prop | Type | Description |
|
|
|------|------|-------------|
|
|
| `size` | xs, sm, md, lg, xl | Component size |
|
|
| `radius` | xs, sm, md, lg, xl | Border radius |
|
|
| `color` | string | Theme color name |
|
|
| `variant` | string | Style variant |
|
|
| `disabled` | boolean | Disable interaction |
|
|
|
|
## Component Validation
|
|
|
|
Why validation matters:
|
|
- Prevents hallucinated prop names
|
|
- Validates enum values
|
|
- Catches typos before runtime
|
|
- Documents available options
|
|
|
|
### Validation Response
|
|
|
|
```json
|
|
{
|
|
"valid": true,
|
|
"errors": [],
|
|
"warnings": []
|
|
}
|
|
```
|
|
|
|
With errors:
|
|
```json
|
|
{
|
|
"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)"
|
|
]
|
|
}
|
|
```
|
|
|
|
## Grid System
|
|
|
|
DMC Grid with responsive spans:
|
|
|
|
```python
|
|
dmc.Grid(
|
|
children=[
|
|
dmc.GridCol(
|
|
children=[chart],
|
|
span={"base": 12, "sm": 6, "lg": 4}
|
|
)
|
|
],
|
|
gutter="md"
|
|
)
|
|
```
|
|
|
|
## Button Example
|
|
|
|
```json
|
|
{
|
|
"component": "Button",
|
|
"props": {
|
|
"variant": {
|
|
"type": "string",
|
|
"enum": ["filled", "outline", "light", "subtle", "default", "gradient"],
|
|
"default": "filled"
|
|
},
|
|
"color": {
|
|
"type": "string",
|
|
"default": "blue"
|
|
},
|
|
"size": {
|
|
"type": "string",
|
|
"enum": ["xs", "sm", "md", "lg", "xl"],
|
|
"default": "sm"
|
|
}
|
|
}
|
|
}
|
|
```
|