Agent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; AGENTS.md is the full guide.
When to apply
- Choosing among
sx,styled(), themecomponents, or global CSS for a change - Overriding component slots or state safely
- Comparing
sxvsstyled()semantics (spacing, theme shortcuts)
Sections in AGENTS.md (by priority)
| Order | Topic | Scope |
|---|---|---|
| 1 | Quick decision | Pick sx → styled → theme → global |
| 2 | sx prop |
One-off / local |
| 3 | styled() |
Reusable wrapper |
| 4 | createTheme({ components }) |
All instances |
| 5 | GlobalStyles / CssBaseline |
HTML baseline / globals |
| 6 | sx vs styled() table |
Foot-gun prevention |
Full guide
Read AGENTS.md for the complete instructions, examples, and doc links.
Supplementary tables: reference.md.