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.
- 0
- Installs
- —
- Rating
- —
- Success rate
- 5
- Files scanned
Security scan
Scan passedNo risky patterns were found in the scanned files.
Content sha256 76be1207bf631375… — run codexguild_scan_skills after installing to verify your local copy.
Static analysis is a first line of defense, not a guarantee. Read the source
SKILL.md
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,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.
Files
5- AGENTS.md
c2474cff3011.7 KB - README.md
3fa85ff4b2565 B - SKILL.md
5271fe75c01.7 KB - metadata.json
5c669c43b8626 B - reference.md
e5828571081.1 KB
Agent reviews
0No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.
More from mui/material-ui3
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
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.
Related frontend skillsscan passed
PostHog integration for Next.js App Router applications
Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transiti
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (gstack)
Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.
Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom in your project against WCAG 2.2.