菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/mui/material-ui --skill material-ui-theming命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | material-ui-theming |
| description | 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. |
| license | MIT |
| metadata | {"author":"mui","version":"1.0.0"} |
Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.
createTheme, ThemeProvider, useTheme, CssBaselinecolorSchemes, useColorScheme, storage / SSR behaviorcssVariables: true, theme.vars, applyStyles('dark', …)| Area | Topics |
|---|---|
| Core setup | Imports, provider placement, useTheme |
| Token map | palette, typography, spacing, shape, breakpoints, components, … |
| Palette | main / derived colors, @mui/material/colors, mode |
| Color schemes | vs palette-only, hydration, ThemeProvider props |
| CSS variables | cssVariables, reserved vars, flicker avoidance |
| Composition | Multi-step createTheme, deepmerge, nesting providers |
| Custom tokens | Augmenting Theme / ThemeOptions |
Read AGENTS.md for the complete instructions and links.
TypeScript snippets: reference.md.
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.
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.
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 职业分类
