About material-ui-styling
An agent skill that helps developers choose and apply Material UI styling options, from local `sx` rules to global CSS. It explains scope, component slots and states, and the distinctions between `sx` and `styled()`.
Key features
- 01Styling layer selection
- 02Local `sx` styling
- 03Reusable `styled()` wrappers
- 04Theme-wide component overrides
- 05Global styles and baselines
- 06`sx` versus `styled()` guidance
Use cases
- 01Choosing a styling approach for a change
- 02Overriding component slots or states
- 03Creating reusable styled wrappers
- 04Avoiding common `sx` and `styled()` pitfalls
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/material-ui-stylingin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
README.mdreference.mdmetadata.jsonAGENTS.mdDetails
From the project READMEMaterial UI styling
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.
Comments
Markdown supported