메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
SOC 직업 분류 기준
| 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"} |
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.
sx, styled(), theme components, or global CSS for a changesx vs styled() semantics (spacing, theme shortcuts)| 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 |
Read AGENTS.md for the complete instructions, examples, and doc links.
Supplementary tables: reference.md.