메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Develop AI-powered applications using Genkit in Node.js/TypeScript. Use when the user asks about Genkit, AI agents, flows, or tools in JavaScript/TypeScript, or when encountering Genkit errors, validation issues, type errors, or API problems.
Apply Google's design language to a UI. Load whenever the user wants something to look or feel like a Google product, including requests like "apply Google design style", "make it look like a Google product", "Google-style UI", "design.google guidance", "Google design principles", "Google Sans typography", "Product Sans", "Gemini visual language", "the Gemini sparkle / gradient look", "Material You expressiveness", or any question about how Google approaches color, type, motion, and brand across its products (Search, Gemini, Workspace, Pixel). This is the language layer above the Material 3 spec; for exact M3 token values use the sibling skill m3-docs.
Scaffold a self-contained Material Design 3 md-* web component and/or its React wrapper. Use when the user says: "create an M3 component", "scaffold a Material Design 3 <X> component", "build an md-* web component", "make a new Material component", "wrap a component in React", "add md-<x> to the monorepo".
User-invoked fix skill. Auto-correct Material Design 3 violations in a codebase. Use when asked to "fix M3 violations", "auto-correct Material Design issues", "make this M3-compliant", "clean up MUI residue", "fix hardcoded colors", "fix sx on md components", or "fix wrong icon names".
Turn a natural-language design brief into a Material Design 3 React scaffold with @aphrody-code/m3-design. Use when asked to "scaffold a screen from a description", "generate an M3 layout from a brief", "design compiler", "brief to JSX", or "make an M3 prototype/dashboard/deck from this prompt".
Load this skill whenever the user wants to design or build UI that looks Material Design 3 / Material You / Google-style, including requests like "make this look Material", "apply M3 styling", "which color role or token should I use", "design a Google-style component", "is this on-brand for Material", "M3 color system", "how do I use MD3 tokens on the web", "style this with Material Design", "use M3 elevation or shape", "add M3 motion or animation", "pick the right surface level", "make it look like Google Workspace", or any question about MD3 semantics, color roles, type scale, elevation, shape, motion easing, state layers, or window size classes.
| 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.