[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mui-material-ui-styling":3,"mdc-65lg9b-key":41,"related-repo-mui-material-ui-styling":360,"related-org-mui-material-ui-styling":413},{"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-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},"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},"CSS","css","tag",{"name":17,"slug":18,"type":15},"UI Components","ui-components",{"name":20,"slug":21,"type":15},"Frontend","frontend",{"name":23,"slug":24,"type":15},"Design","design",98582,"https:\u002F\u002Fgithub.com\u002Fmui\u002Fmaterial-ui","2026-07-14T05:19:18.777291","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-styling","---\nname: material-ui-styling\ndescription: 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.\nlicense: MIT\nmetadata:\n  author: mui\n  version: '1.0.0'\n---\n\n# Material UI styling\n\nAgent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; AGENTS.md is the full guide.\n\n## When to apply\n\n- Choosing among `sx`, `styled()`, theme `components`, or global CSS for a change\n- Overriding component slots or state safely\n- Comparing `sx` vs `styled()` semantics (spacing, theme shortcuts)\n\n## Sections in AGENTS.md (by priority)\n\n| Order | Topic                          | Scope                                 |\n| :---- | :----------------------------- | :------------------------------------ |\n| 1     | Quick decision                 | Pick `sx` → `styled` → theme → global |\n| 2     | `sx` prop                      | One-off \u002F local                       |\n| 3     | `styled()`                     | Reusable wrapper                      |\n| 4     | `createTheme({ components })`  | All instances                         |\n| 5     | `GlobalStyles` \u002F `CssBaseline` | HTML baseline \u002F globals               |\n| 6     | `sx` vs `styled()` table       | Foot-gun prevention                   |\n\n## Full guide\n\nRead [AGENTS.md](.\u002FAGENTS.md) for the complete instructions, examples, and doc links.\n\nSupplementary tables: [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,129,135,327,333,347],{"type":49,"tag":50,"props":51,"children":53},"element","h1",{"id":52},"materialui-styling",[54],{"type":55,"value":56},"text","Material UI styling",{"type":49,"tag":58,"props":59,"children":60},"p",{},[61],{"type":55,"value":62},"Agent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; 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,105,110],{"type":49,"tag":75,"props":76,"children":77},"li",{},[78,80,87,89,95,97,103],{"type":55,"value":79},"Choosing among ",{"type":49,"tag":81,"props":82,"children":84},"code",{"className":83},[],[85],{"type":55,"value":86},"sx",{"type":55,"value":88},", ",{"type":49,"tag":81,"props":90,"children":92},{"className":91},[],[93],{"type":55,"value":94},"styled()",{"type":55,"value":96},", theme ",{"type":49,"tag":81,"props":98,"children":100},{"className":99},[],[101],{"type":55,"value":102},"components",{"type":55,"value":104},", or global CSS for a change",{"type":49,"tag":75,"props":106,"children":107},{},[108],{"type":55,"value":109},"Overriding component slots or state safely",{"type":49,"tag":75,"props":111,"children":112},{},[113,115,120,122,127],{"type":55,"value":114},"Comparing ",{"type":49,"tag":81,"props":116,"children":118},{"className":117},[],[119],{"type":55,"value":86},{"type":55,"value":121}," vs ",{"type":49,"tag":81,"props":123,"children":125},{"className":124},[],[126],{"type":55,"value":94},{"type":55,"value":128}," semantics (spacing, theme shortcuts)",{"type":49,"tag":64,"props":130,"children":132},{"id":131},"sections-in-agentsmd-by-priority",[133],{"type":55,"value":134},"Sections in AGENTS.md (by priority)",{"type":49,"tag":136,"props":137,"children":138},"table",{},[139,164],{"type":49,"tag":140,"props":141,"children":142},"thead",{},[143],{"type":49,"tag":144,"props":145,"children":146},"tr",{},[147,154,159],{"type":49,"tag":148,"props":149,"children":151},"th",{"align":150},"left",[152],{"type":55,"value":153},"Order",{"type":49,"tag":148,"props":155,"children":156},{"align":150},[157],{"type":55,"value":158},"Topic",{"type":49,"tag":148,"props":160,"children":161},{"align":150},[162],{"type":55,"value":163},"Scope",{"type":49,"tag":165,"props":166,"children":167},"tbody",{},[168,202,225,246,268,298],{"type":49,"tag":144,"props":169,"children":170},{},[171,177,182],{"type":49,"tag":172,"props":173,"children":174},"td",{"align":150},[175],{"type":55,"value":176},"1",{"type":49,"tag":172,"props":178,"children":179},{"align":150},[180],{"type":55,"value":181},"Quick decision",{"type":49,"tag":172,"props":183,"children":184},{"align":150},[185,187,192,194,200],{"type":55,"value":186},"Pick ",{"type":49,"tag":81,"props":188,"children":190},{"className":189},[],[191],{"type":55,"value":86},{"type":55,"value":193}," → ",{"type":49,"tag":81,"props":195,"children":197},{"className":196},[],[198],{"type":55,"value":199},"styled",{"type":55,"value":201}," → theme → global",{"type":49,"tag":144,"props":203,"children":204},{},[205,210,220],{"type":49,"tag":172,"props":206,"children":207},{"align":150},[208],{"type":55,"value":209},"2",{"type":49,"tag":172,"props":211,"children":212},{"align":150},[213,218],{"type":49,"tag":81,"props":214,"children":216},{"className":215},[],[217],{"type":55,"value":86},{"type":55,"value":219}," prop",{"type":49,"tag":172,"props":221,"children":222},{"align":150},[223],{"type":55,"value":224},"One-off \u002F local",{"type":49,"tag":144,"props":226,"children":227},{},[228,233,241],{"type":49,"tag":172,"props":229,"children":230},{"align":150},[231],{"type":55,"value":232},"3",{"type":49,"tag":172,"props":234,"children":235},{"align":150},[236],{"type":49,"tag":81,"props":237,"children":239},{"className":238},[],[240],{"type":55,"value":94},{"type":49,"tag":172,"props":242,"children":243},{"align":150},[244],{"type":55,"value":245},"Reusable wrapper",{"type":49,"tag":144,"props":247,"children":248},{},[249,254,263],{"type":49,"tag":172,"props":250,"children":251},{"align":150},[252],{"type":55,"value":253},"4",{"type":49,"tag":172,"props":255,"children":256},{"align":150},[257],{"type":49,"tag":81,"props":258,"children":260},{"className":259},[],[261],{"type":55,"value":262},"createTheme({ components })",{"type":49,"tag":172,"props":264,"children":265},{"align":150},[266],{"type":55,"value":267},"All instances",{"type":49,"tag":144,"props":269,"children":270},{},[271,276,293],{"type":49,"tag":172,"props":272,"children":273},{"align":150},[274],{"type":55,"value":275},"5",{"type":49,"tag":172,"props":277,"children":278},{"align":150},[279,285,287],{"type":49,"tag":81,"props":280,"children":282},{"className":281},[],[283],{"type":55,"value":284},"GlobalStyles",{"type":55,"value":286}," \u002F ",{"type":49,"tag":81,"props":288,"children":290},{"className":289},[],[291],{"type":55,"value":292},"CssBaseline",{"type":49,"tag":172,"props":294,"children":295},{"align":150},[296],{"type":55,"value":297},"HTML baseline \u002F globals",{"type":49,"tag":144,"props":299,"children":300},{},[301,306,322],{"type":49,"tag":172,"props":302,"children":303},{"align":150},[304],{"type":55,"value":305},"6",{"type":49,"tag":172,"props":307,"children":308},{"align":150},[309,314,315,320],{"type":49,"tag":81,"props":310,"children":312},{"className":311},[],[313],{"type":55,"value":86},{"type":55,"value":121},{"type":49,"tag":81,"props":316,"children":318},{"className":317},[],[319],{"type":55,"value":94},{"type":55,"value":321}," table",{"type":49,"tag":172,"props":323,"children":324},{"align":150},[325],{"type":55,"value":326},"Foot-gun prevention",{"type":49,"tag":64,"props":328,"children":330},{"id":329},"full-guide",[331],{"type":55,"value":332},"Full guide",{"type":49,"tag":58,"props":334,"children":335},{},[336,338,345],{"type":55,"value":337},"Read ",{"type":49,"tag":339,"props":340,"children":342},"a",{"href":341},".\u002FAGENTS.md",[343],{"type":55,"value":344},"AGENTS.md",{"type":55,"value":346}," for the complete instructions, examples, and doc links.",{"type":49,"tag":58,"props":348,"children":349},{},[350,352,358],{"type":55,"value":351},"Supplementary tables: ",{"type":49,"tag":339,"props":353,"children":355},{"href":354},".\u002Freference.md",[356],{"type":55,"value":357},"reference.md",{"type":55,"value":359},".",{"items":361,"total":412},[362,379,386,397],{"slug":363,"name":363,"fn":364,"description":365,"org":366,"tags":367,"stars":25,"repoUrl":26,"updatedAt":378},"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},[368,369,372,374,377],{"name":20,"slug":21,"type":15},{"name":370,"slug":371,"type":15},"Next.js","next-js",{"name":373,"slug":34,"type":15},"React",{"name":375,"slug":376,"type":15},"Tailwind CSS","tailwind-css",{"name":17,"slug":18,"type":15},"2026-07-14T05:19:16.120603",{"slug":4,"name":4,"fn":5,"description":6,"org":380,"tags":381,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[382,383,384,385],{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":387,"name":387,"fn":388,"description":389,"org":390,"tags":391,"stars":25,"repoUrl":26,"updatedAt":396},"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},[392,393,394,395],{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":375,"slug":376,"type":15},{"name":17,"slug":18,"type":15},"2026-07-14T05:19:20.019149",{"slug":398,"name":398,"fn":399,"description":400,"org":401,"tags":402,"stars":25,"repoUrl":26,"updatedAt":411},"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},[403,404,407,410],{"name":23,"slug":24,"type":15},{"name":405,"slug":406,"type":15},"Themes","themes",{"name":408,"slug":409,"type":15},"TypeScript","typescript",{"name":17,"slug":18,"type":15},"2026-07-14T05:19:17.39816",4,{"items":414,"total":412},[415,423,430,437],{"slug":363,"name":363,"fn":364,"description":365,"org":416,"tags":417,"stars":25,"repoUrl":26,"updatedAt":378},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[418,419,420,421,422],{"name":20,"slug":21,"type":15},{"name":370,"slug":371,"type":15},{"name":373,"slug":34,"type":15},{"name":375,"slug":376,"type":15},{"name":17,"slug":18,"type":15},{"slug":4,"name":4,"fn":5,"description":6,"org":424,"tags":425,"stars":25,"repoUrl":26,"updatedAt":27},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[426,427,428,429],{"name":13,"slug":14,"type":15},{"name":23,"slug":24,"type":15},{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"slug":387,"name":387,"fn":388,"description":389,"org":431,"tags":432,"stars":25,"repoUrl":26,"updatedAt":396},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[433,434,435,436],{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":375,"slug":376,"type":15},{"name":17,"slug":18,"type":15},{"slug":398,"name":398,"fn":399,"description":400,"org":438,"tags":439,"stars":25,"repoUrl":26,"updatedAt":411},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[440,441,442,443],{"name":23,"slug":24,"type":15},{"name":405,"slug":406,"type":15},{"name":408,"slug":409,"type":15},{"name":17,"slug":18,"type":15}]