Catalogskills.sh · mui

material-ui-styling

Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.

AnalyzedVerified hub620 installs

Savant verdict: Analyzed

Scanned or evaluated by Savant; not yet both passing.

Live evaluation

Not evaluated yet. Workspaces can request a live evaluation.

Safety (NVIDIA SkillSpector)

Risk score
7/100
Recommendation
CAUTION
Severity
LOW
Savant decision
Passed (low risk)
SkillSpector rated it CAUTION, but its risk score is below 20/100, so Savant's policy passes it. Its findings are still listed for review. SkillSpector 2.12.0, static analysis.

1 pattern found

  • Prompt Injection: U+0020 x90medium · AGENTS.md:132 · Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.

SKILL.md

---
name: material-ui-styling
description: Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.
license: MIT
metadata:
  author: mui
  version: '1.0.0'
---

# Material 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()`, theme `components`, or global CSS for a change
- Overriding component slots or state safely
- Comparing `sx` vs `styled()` 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](./AGENTS.md) for the complete instructions, examples, and doc links.

Supplementary tables: [reference.md](./reference.md).