@mui/material-ui-styling

@mui/material-ui-styling — AI coding skill

View in AI SkillSafe app
0 downloads
0 stars
0 demos
SKILL.md
namematerial-ui-styling
descriptionChooses 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.
licenseMIT

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 sxstyled → 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.

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-styling/verified)](https://skillsafe.ai/skill/@mui/material-ui-styling/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-styling/installs)](https://skillsafe.ai/skill/@mui/material-ui-styling/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-styling/scan)](https://skillsafe.ai/skill/@mui/material-ui-styling/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-styling/eval)](https://skillsafe.ai/skill/@mui/material-ui-styling/)