[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mui-material-ui-theming":3,"mdc-gcndp7-key":41,"related-repo-mui-material-ui-theming":385,"related-org-mui-material-ui-theming":438},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":36,"sourceUrl":39,"mdContent":40},"material-ui-theming","configure Material UI themes and tokens","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\u002Fdark, or aligning tokens across an app.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"mui","MUI (Material UI)","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmui.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"TypeScript","typescript","tag",{"name":17,"slug":18,"type":15},"Themes","themes",{"name":20,"slug":21,"type":15},"UI Components","ui-components",{"name":23,"slug":24,"type":15},"Design","design",98582,"https:\u002F\u002Fgithub.com\u002Fmui\u002Fmaterial-ui","2026-07-14T05:19:17.39816","MIT",32572,[31,32,33,34,35],"design-system","material-design","material-ui","react","react-components",{"repoUrl":26,"stars":25,"forks":29,"topics":37,"description":38},[31,32,33,34,35],"Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.","https:\u002F\u002Fgithub.com\u002Fmui\u002Fmaterial-ui\u002Ftree\u002FHEAD\u002Fskills\u002Fmaterial-ui-theming","---\nname: material-ui-theming\ndescription: 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\u002Fdark, or aligning tokens across an app.\nlicense: MIT\nmetadata:\n  author: mui\n  version: '1.0.0'\n---\n\n# Material UI theming and design tokens\n\nAgent skill for theme creation, design tokens, light\u002Fdark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.\n\n## When to apply\n\n- `createTheme`, `ThemeProvider`, `useTheme`, `CssBaseline`\n- `colorSchemes`, `useColorScheme`, storage \u002F SSR behavior\n- `cssVariables: true`, `theme.vars`, `applyStyles('dark', …)`\n- Custom theme keys and TypeScript module augmentation\n\n## Sections in AGENTS.md\n\n| Area          | Topics                                                          |\n| :------------ | :-------------------------------------------------------------- |\n| Core setup    | Imports, provider placement, `useTheme`                         |\n| Token map     | palette, typography, spacing, shape, breakpoints, components, … |\n| Palette       | `main` \u002F derived colors, `@mui\u002Fmaterial\u002Fcolors`, `mode`         |\n| Color schemes | vs palette-only, hydration, `ThemeProvider` props               |\n| CSS variables | `cssVariables`, reserved `vars`, flicker avoidance              |\n| Composition   | Multi-step `createTheme`, `deepmerge`, nesting providers        |\n| Custom tokens | Augmenting `Theme` \u002F `ThemeOptions`                             |\n\n## Full guide\n\nRead [AGENTS.md](.\u002FAGENTS.md) for the complete instructions and links.\n\nTypeScript snippets: [reference.md](.\u002Freference.md).\n",{"data":42,"body":45},{"name":4,"description":6,"license":28,"metadata":43},{"author":8,"version":44},"1.0.0",{"type":46,"children":47},"root",[48,57,63,70,153,159,352,358,372],{"type":49,"tag":50,"props":51,"children":53},"element","h1",{"id":52},"materialui-theming-and-design-tokens",[54],{"type":55,"value":56},"text","Material UI theming and design tokens",{"type":49,"tag":58,"props":59,"children":60},"p",{},[61],{"type":55,"value":62},"Agent skill for theme creation, design tokens, light\u002Fdark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.",{"type":49,"tag":64,"props":65,"children":67},"h2",{"id":66},"when-to-apply",[68],{"type":55,"value":69},"When to apply",{"type":49,"tag":71,"props":72,"children":73},"ul",{},[74,107,125,148],{"type":49,"tag":75,"props":76,"children":77},"li",{},[78,85,87,93,94,100,101],{"type":49,"tag":79,"props":80,"children":82},"code",{"className":81},[],[83],{"type":55,"value":84},"createTheme",{"type":55,"value":86},", ",{"type":49,"tag":79,"props":88,"children":90},{"className":89},[],[91],{"type":55,"value":92},"ThemeProvider",{"type":55,"value":86},{"type":49,"tag":79,"props":95,"children":97},{"className":96},[],[98],{"type":55,"value":99},"useTheme",{"type":55,"value":86},{"type":49,"tag":79,"props":102,"children":104},{"className":103},[],[105],{"type":55,"value":106},"CssBaseline",{"type":49,"tag":75,"props":108,"children":109},{},[110,116,117,123],{"type":49,"tag":79,"props":111,"children":113},{"className":112},[],[114],{"type":55,"value":115},"colorSchemes",{"type":55,"value":86},{"type":49,"tag":79,"props":118,"children":120},{"className":119},[],[121],{"type":55,"value":122},"useColorScheme",{"type":55,"value":124},", storage \u002F SSR behavior",{"type":49,"tag":75,"props":126,"children":127},{},[128,134,135,141,142],{"type":49,"tag":79,"props":129,"children":131},{"className":130},[],[132],{"type":55,"value":133},"cssVariables: true",{"type":55,"value":86},{"type":49,"tag":79,"props":136,"children":138},{"className":137},[],[139],{"type":55,"value":140},"theme.vars",{"type":55,"value":86},{"type":49,"tag":79,"props":143,"children":145},{"className":144},[],[146],{"type":55,"value":147},"applyStyles('dark', …)",{"type":49,"tag":75,"props":149,"children":150},{},[151],{"type":55,"value":152},"Custom theme keys and TypeScript module augmentation",{"type":49,"tag":64,"props":154,"children":156},{"id":155},"sections-in-agentsmd",[157],{"type":55,"value":158},"Sections in AGENTS.md",{"type":49,"tag":160,"props":161,"children":162},"table",{},[163,183],{"type":49,"tag":164,"props":165,"children":166},"thead",{},[167],{"type":49,"tag":168,"props":169,"children":170},"tr",{},[171,178],{"type":49,"tag":172,"props":173,"children":175},"th",{"align":174},"left",[176],{"type":55,"value":177},"Area",{"type":49,"tag":172,"props":179,"children":180},{"align":174},[181],{"type":55,"value":182},"Topics",{"type":49,"tag":184,"props":185,"children":186},"tbody",{},[187,206,219,251,271,298,325],{"type":49,"tag":168,"props":188,"children":189},{},[190,196],{"type":49,"tag":191,"props":192,"children":193},"td",{"align":174},[194],{"type":55,"value":195},"Core setup",{"type":49,"tag":191,"props":197,"children":198},{"align":174},[199,201],{"type":55,"value":200},"Imports, provider placement, ",{"type":49,"tag":79,"props":202,"children":204},{"className":203},[],[205],{"type":55,"value":99},{"type":49,"tag":168,"props":207,"children":208},{},[209,214],{"type":49,"tag":191,"props":210,"children":211},{"align":174},[212],{"type":55,"value":213},"Token map",{"type":49,"tag":191,"props":215,"children":216},{"align":174},[217],{"type":55,"value":218},"palette, typography, spacing, shape, breakpoints, components, …",{"type":49,"tag":168,"props":220,"children":221},{},[222,227],{"type":49,"tag":191,"props":223,"children":224},{"align":174},[225],{"type":55,"value":226},"Palette",{"type":49,"tag":191,"props":228,"children":229},{"align":174},[230,236,238,244,245],{"type":49,"tag":79,"props":231,"children":233},{"className":232},[],[234],{"type":55,"value":235},"main",{"type":55,"value":237}," \u002F derived colors, ",{"type":49,"tag":79,"props":239,"children":241},{"className":240},[],[242],{"type":55,"value":243},"@mui\u002Fmaterial\u002Fcolors",{"type":55,"value":86},{"type":49,"tag":79,"props":246,"children":248},{"className":247},[],[249],{"type":55,"value":250},"mode",{"type":49,"tag":168,"props":252,"children":253},{},[254,259],{"type":49,"tag":191,"props":255,"children":256},{"align":174},[257],{"type":55,"value":258},"Color schemes",{"type":49,"tag":191,"props":260,"children":261},{"align":174},[262,264,269],{"type":55,"value":263},"vs palette-only, hydration, ",{"type":49,"tag":79,"props":265,"children":267},{"className":266},[],[268],{"type":55,"value":92},{"type":55,"value":270}," props",{"type":49,"tag":168,"props":272,"children":273},{},[274,279],{"type":49,"tag":191,"props":275,"children":276},{"align":174},[277],{"type":55,"value":278},"CSS variables",{"type":49,"tag":191,"props":280,"children":281},{"align":174},[282,288,290,296],{"type":49,"tag":79,"props":283,"children":285},{"className":284},[],[286],{"type":55,"value":287},"cssVariables",{"type":55,"value":289},", reserved ",{"type":49,"tag":79,"props":291,"children":293},{"className":292},[],[294],{"type":55,"value":295},"vars",{"type":55,"value":297},", flicker avoidance",{"type":49,"tag":168,"props":299,"children":300},{},[301,306],{"type":49,"tag":191,"props":302,"children":303},{"align":174},[304],{"type":55,"value":305},"Composition",{"type":49,"tag":191,"props":307,"children":308},{"align":174},[309,311,316,317,323],{"type":55,"value":310},"Multi-step ",{"type":49,"tag":79,"props":312,"children":314},{"className":313},[],[315],{"type":55,"value":84},{"type":55,"value":86},{"type":49,"tag":79,"props":318,"children":320},{"className":319},[],[321],{"type":55,"value":322},"deepmerge",{"type":55,"value":324},", nesting providers",{"type":49,"tag":168,"props":326,"children":327},{},[328,333],{"type":49,"tag":191,"props":329,"children":330},{"align":174},[331],{"type":55,"value":332},"Custom tokens",{"type":49,"tag":191,"props":334,"children":335},{"align":174},[336,338,344,346],{"type":55,"value":337},"Augmenting ",{"type":49,"tag":79,"props":339,"children":341},{"className":340},[],[342],{"type":55,"value":343},"Theme",{"type":55,"value":345}," \u002F ",{"type":49,"tag":79,"props":347,"children":349},{"className":348},[],[350],{"type":55,"value":351},"ThemeOptions",{"type":49,"tag":64,"props":353,"children":355},{"id":354},"full-guide",[356],{"type":55,"value":357},"Full guide",{"type":49,"tag":58,"props":359,"children":360},{},[361,363,370],{"type":55,"value":362},"Read ",{"type":49,"tag":364,"props":365,"children":367},"a",{"href":366},".\u002FAGENTS.md",[368],{"type":55,"value":369},"AGENTS.md",{"type":55,"value":371}," for the complete instructions and links.",{"type":49,"tag":58,"props":373,"children":374},{},[375,377,383],{"type":55,"value":376},"TypeScript snippets: ",{"type":49,"tag":364,"props":378,"children":380},{"href":379},".\u002Freference.md",[381],{"type":55,"value":382},"reference.md",{"type":55,"value":384},".",{"items":386,"total":437},[387,406,419,430],{"slug":388,"name":388,"fn":389,"description":390,"org":391,"tags":392,"stars":25,"repoUrl":26,"updatedAt":405},"material-ui-nextjs","integrate Material UI with Next.js","Integrates Material UI with Next.js App and Pages routers using @mui\u002Fmaterial-nextjs, Emotion cache providers, next\u002Ffont, CSS layers with Tailwind\u002FCSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[393,396,399,401,404],{"name":394,"slug":395,"type":15},"Frontend","frontend",{"name":397,"slug":398,"type":15},"Next.js","next-js",{"name":400,"slug":34,"type":15},"React",{"name":402,"slug":403,"type":15},"Tailwind CSS","tailwind-css",{"name":20,"slug":21,"type":15},"2026-07-14T05:19:16.120603",{"slug":407,"name":407,"fn":408,"description":409,"org":410,"tags":411,"stars":25,"repoUrl":26,"updatedAt":418},"material-ui-styling","apply Material UI styling approaches","Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui\u002Fmaterial components, customizing themes, overriding slots, or comparing sx vs styled.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[412,415,416,417],{"name":413,"slug":414,"type":15},"CSS","css",{"name":23,"slug":24,"type":15},{"name":394,"slug":395,"type":15},{"name":20,"slug":21,"type":15},"2026-07-14T05:19:18.777291",{"slug":420,"name":420,"fn":421,"description":422,"org":423,"tags":424,"stars":25,"repoUrl":26,"updatedAt":429},"material-ui-tailwind","integrate Material UI with Tailwind CSS","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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[425,426,427,428],{"name":413,"slug":414,"type":15},{"name":394,"slug":395,"type":15},{"name":402,"slug":403,"type":15},{"name":20,"slug":21,"type":15},"2026-07-14T05:19:20.019149",{"slug":4,"name":4,"fn":5,"description":6,"org":431,"tags":432,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[433,434,435,436],{"name":23,"slug":24,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},4,{"items":439,"total":437},[440,448,455,462],{"slug":388,"name":388,"fn":389,"description":390,"org":441,"tags":442,"stars":25,"repoUrl":26,"updatedAt":405},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[443,444,445,446,447],{"name":394,"slug":395,"type":15},{"name":397,"slug":398,"type":15},{"name":400,"slug":34,"type":15},{"name":402,"slug":403,"type":15},{"name":20,"slug":21,"type":15},{"slug":407,"name":407,"fn":408,"description":409,"org":449,"tags":450,"stars":25,"repoUrl":26,"updatedAt":418},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[451,452,453,454],{"name":413,"slug":414,"type":15},{"name":23,"slug":24,"type":15},{"name":394,"slug":395,"type":15},{"name":20,"slug":21,"type":15},{"slug":420,"name":420,"fn":421,"description":422,"org":456,"tags":457,"stars":25,"repoUrl":26,"updatedAt":429},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[458,459,460,461],{"name":413,"slug":414,"type":15},{"name":394,"slug":395,"type":15},{"name":402,"slug":403,"type":15},{"name":20,"slug":21,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":463,"tags":464,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[465,466,467,468],{"name":23,"slug":24,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15}]