@mui/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.

View in AI SkillSafe app
Scanned · no findings
0 downloads
0 stars
0 demos
SKILL.md
namematerial-ui-theming
descriptionGuides 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.
licenseMIT

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 for the complete instructions and links.

TypeScript snippets: 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-theming/verified)](https://skillsafe.ai/skill/@mui/material-ui-theming/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-theming/installs)](https://skillsafe.ai/skill/@mui/material-ui-theming/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-theming/scan)](https://skillsafe.ai/skill/@mui/material-ui-theming/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@mui/material-ui-theming/eval)](https://skillsafe.ai/skill/@mui/material-ui-theming/)