mui
Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.
89
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillAgent success when using this skill
Validation for skill structure
Evaluation results
100%
40%Product Dashboard Card Components
sx prop styling patterns
SxProps<Theme> type
66%
100%
No hardcoded colors
100%
100%
Spacing scale used
100%
100%
Inline styles for ProductCard
0%
100%
Separate styles file for ProductDetailPanel
100%
100%
No inline sx functions (static)
100%
100%
Conditional sx array
0%
100%
Theme token for borderRadius
75%
100%
No deep MUI imports
28%
100%
SxProps import type
0%
100%
Without context: $0.3251 · 1m 17s · 13 turns · 13 in / 5,603 out tokens
With context: $0.8112 · 2m 11s · 26 turns · 26 in / 8,948 out tokens
79%
-9%Content Management Dashboard Layout
MUI v7 breaking changes
No onBackdropClick
100%
100%
onClose used for backdrop
100%
100%
Grid v2 import
0%
0%
Grid v2 syntax
100%
66%
slots/slotProps pattern
100%
100%
cssVariables in theme
100%
100%
No deep imports
100%
50%
MIGRATION_NOTES.md present
100%
100%
Without context: $0.4997 · 1m 43s · 24 turns · 25 in / 5,550 out tokens
With context: $2.4752 · 6m 11s · 61 turns · 60 in / 20,352 out tokens
54%
16%User Profile Settings Page
notifications and styled components
useMuiSnackbar hook
0%
0%
styled() for StatusBadge
0%
0%
Responsive sx breakpoints
100%
100%
No hardcoded colors
100%
100%
Icon alias import
0%
100%
SxProps<Theme> type
0%
100%
Spacing scale in form
100%
100%
No deep MUI imports
100%
50%
styled() theme access
0%
0%
Without context: $0.2455 · 51s · 13 turns · 62 in / 3,317 out tokens
With context: $1.6801 · 4m 38s · 48 turns · 5,684 in / 14,471 out tokens
- Evaluated
- Agent
- Claude Code
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.