MA
materialui
Material UI React component library. Use for React UI.
Install
mkdir -p .claude/skills/materialui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17051" && unzip -o skill.zip -d .claude/skills/materialui && rm skill.zipInstalls to .claude/skills/materialui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Material UI React component library. Use for React UI.54 chars✓ has a “when” trigger
About this skill
Material UI (MUI)
MUI Core (v6) is the gold standard for React UI. v6 introduces Pigment CSS (Zero-runtime CSS-in-JS) for compatibility with React Server Components (Next.js App Router).
When to Use
- Enterprise: Consistent, rigorous design system.
- Complex Data:
MUI X(DataGrid) is the most powerful table library for React. - Accessibility: First-class a11y support.
Core Concepts
The sx prop
Superset of CSS. sx={{ mt: 2, color: 'primary.main' }}.
Theme Provider
Global design tokens (palette, typography, breakpoints).
Slots / SlotProps
Deep customization of internal sub-components.
Best Practices (2025)
Do:
- Use Pigment CSS: For RSC compatibility.
- Use
Box: Instead ofdivfor layout. - Use
MUI X: For Data Grids and Date Pickers.
Don't:
- Don't use
makeStyles: It is deprecated. Usestyled()orsx.