About material-ui-theming
An agent skill for creating Material UI themes and design tokens, including color schemes and CSS theme variables. It is for developers configuring theme providers, palette behavior, SSR-related color handling, or custom theme keys.
Key features
- 01Theme creation and provider setup
- 02Design token configuration
- 03Palette and color schemes
- 04CSS theme variables
- 05Theme composition
- 06Custom theme keys with TypeScript
Use cases
- 01Setting up a Material UI theme
- 02Configuring light and dark color schemes
- 03Using CSS theme variables
- 04Adding custom theme tokens with TypeScript
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/material-ui-themingin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
README.mdmetadata.jsonreference.mdAGENTS.mdDetails
From the project READMEMaterial 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,CssBaselinecolorSchemes,useColorScheme, storage / SSR behaviorcssVariables: 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.
Comments
Markdown supported