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>
2.0 KiB
2.0 KiB
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
{
"valid": true,
"errors": [],
"warnings": []
}
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)"
]
}
Grid System
DMC Grid with responsive spans:
dmc.Grid(
children=[
dmc.GridCol(
children=[chart],
span={"base": 12, "sm": 6, "lg": 4}
)
],
gutter="md"
)
Button Example
{
"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"
}
}
}