material-ui-theming
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.
ソース情報
- リポジトリ
- mui/material-ui
- ソースの最終更新活動
- 2026年6月29日 09:31
- 検出された SKILL.md の言語
- 英語
- スター
- 99,285
- フォーク
- 32,498
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
ファイルエクスプローラー
5 ファイルSKILL.md を表示中
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"}
# Material UI theming and design tokens
Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.
## When to apply
- `createTheme`, `ThemeProvider`, `useTheme`, `CssBaseline`
- `colorSchemes`, `useColorScheme`, storage / SSR behavior
- `cssVariables: true`, `theme.vars`, `applyStyles('dark', …)`
- Custom theme keys and TypeScript module augmentation
## Sections in AGENTS.md
| 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` |
## Full guide
Read [AGENTS.md](./AGENTS.md) for the complete instructions and links.
TypeScript snippets: [reference.md](./reference.md).
GitHubで見る