[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-mui-material-ui-nextjs":3,"mdc-jf7rs1-key":43,"related-org-mui-material-ui-nextjs":406,"related-repo-mui-material-ui-nextjs":458},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":28,"repoUrl":29,"updatedAt":30,"license":31,"forks":32,"topics":33,"repo":38,"sourceUrl":41,"mdContent":42},"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},"mui","MUI (Material UI)","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmui.png",[12,16,19,22,25],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Next.js","next-js",{"name":20,"slug":21,"type":15},"Tailwind CSS","tailwind-css",{"name":23,"slug":24,"type":15},"UI Components","ui-components",{"name":26,"slug":27,"type":15},"Frontend","frontend",98582,"https:\u002F\u002Fgithub.com\u002Fmui\u002Fmaterial-ui","2026-07-14T05:19:16.120603","MIT",32572,[34,35,36,14,37],"design-system","material-design","material-ui","react-components",{"repoUrl":29,"stars":28,"forks":32,"topics":39,"description":40},[34,35,36,14,37],"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-nextjs","---\nname: material-ui-nextjs\ndescription: 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.\nlicense: MIT\nmetadata:\n  author: mui\n  version: '1.0.0'\n---\n\n# Material UI and Next.js\n\nAgent skill for Next.js + Material UI wiring (SSR\u002Fstreaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.\n\n## When to apply\n\n- New App Router or Pages Router app using `@mui\u002Fmaterial`\n- Styles missing, wrong order, or in `body` instead of `head`\n- `next\u002Ffont` + `ThemeProvider` \u002F `createTheme`\n- Tailwind or CSS Modules + MUI (`enableCssLayer`)\n- `Button` + `component={Link}` or Next.js v16 client boundary errors\n- `useSearchParams` \u002F URL-driven MUI views and Suspense boundaries\n\n## Sections in AGENTS.md\n\n| Area          | Topics                                                                                  |\n| :------------ | :-------------------------------------------------------------------------------------- |\n| App Router    | `AppRouterCacheProvider`, `@emotion\u002Fcache`, `options`, `useSearchParams` + `\u003CSuspense>` |\n| Pages Router  | `_document`, `_app`, `DocumentHeadTags`, `AppCacheProvider`                             |\n| Fonts         | `'use client'` theme, `next\u002Ffont`, CSS variables on `html`                              |\n| CSS variables | `cssVariables`, SSR flicker docs                                                        |\n| CSS layers    | `enableCssLayer`, Tailwind \u002F other CSS                                                  |\n| Link          | Client wrapper, routing guide, examples repo                                            |\n\n## Full guide\n\nRead [AGENTS.md](.\u002FAGENTS.md) for complete steps and doc links.\n\n[reference.md](.\u002Freference.md) lists import paths and provider shape.\n",{"data":44,"body":47},{"name":4,"description":6,"license":31,"metadata":45},{"author":8,"version":46},"1.0.0",{"type":48,"children":49},"root",[50,59,65,72,175,181,375,381,395],{"type":51,"tag":52,"props":53,"children":55},"element","h1",{"id":54},"materialui-and-nextjs",[56],{"type":57,"value":58},"text","Material UI and Next.js",{"type":51,"tag":60,"props":61,"children":62},"p",{},[63],{"type":57,"value":64},"Agent skill for Next.js + Material UI wiring (SSR\u002Fstreaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.",{"type":51,"tag":66,"props":67,"children":69},"h2",{"id":68},"when-to-apply",[70],{"type":57,"value":71},"When to apply",{"type":51,"tag":73,"props":74,"children":75},"ul",{},[76,89,108,133,146,164],{"type":51,"tag":77,"props":78,"children":79},"li",{},[80,82],{"type":57,"value":81},"New App Router or Pages Router app using ",{"type":51,"tag":83,"props":84,"children":86},"code",{"className":85},[],[87],{"type":57,"value":88},"@mui\u002Fmaterial",{"type":51,"tag":77,"props":90,"children":91},{},[92,94,100,102],{"type":57,"value":93},"Styles missing, wrong order, or in ",{"type":51,"tag":83,"props":95,"children":97},{"className":96},[],[98],{"type":57,"value":99},"body",{"type":57,"value":101}," instead of ",{"type":51,"tag":83,"props":103,"children":105},{"className":104},[],[106],{"type":57,"value":107},"head",{"type":51,"tag":77,"props":109,"children":110},{},[111,117,119,125,127],{"type":51,"tag":83,"props":112,"children":114},{"className":113},[],[115],{"type":57,"value":116},"next\u002Ffont",{"type":57,"value":118}," + ",{"type":51,"tag":83,"props":120,"children":122},{"className":121},[],[123],{"type":57,"value":124},"ThemeProvider",{"type":57,"value":126}," \u002F ",{"type":51,"tag":83,"props":128,"children":130},{"className":129},[],[131],{"type":57,"value":132},"createTheme",{"type":51,"tag":77,"props":134,"children":135},{},[136,138,144],{"type":57,"value":137},"Tailwind or CSS Modules + MUI (",{"type":51,"tag":83,"props":139,"children":141},{"className":140},[],[142],{"type":57,"value":143},"enableCssLayer",{"type":57,"value":145},")",{"type":51,"tag":77,"props":147,"children":148},{},[149,155,156,162],{"type":51,"tag":83,"props":150,"children":152},{"className":151},[],[153],{"type":57,"value":154},"Button",{"type":57,"value":118},{"type":51,"tag":83,"props":157,"children":159},{"className":158},[],[160],{"type":57,"value":161},"component={Link}",{"type":57,"value":163}," or Next.js v16 client boundary errors",{"type":51,"tag":77,"props":165,"children":166},{},[167,173],{"type":51,"tag":83,"props":168,"children":170},{"className":169},[],[171],{"type":57,"value":172},"useSearchParams",{"type":57,"value":174}," \u002F URL-driven MUI views and Suspense boundaries",{"type":51,"tag":66,"props":176,"children":178},{"id":177},"sections-in-agentsmd",[179],{"type":57,"value":180},"Sections in AGENTS.md",{"type":51,"tag":182,"props":183,"children":184},"table",{},[185,205],{"type":51,"tag":186,"props":187,"children":188},"thead",{},[189],{"type":51,"tag":190,"props":191,"children":192},"tr",{},[193,200],{"type":51,"tag":194,"props":195,"children":197},"th",{"align":196},"left",[198],{"type":57,"value":199},"Area",{"type":51,"tag":194,"props":201,"children":202},{"align":196},[203],{"type":57,"value":204},"Topics",{"type":51,"tag":206,"props":207,"children":208},"tbody",{},[209,255,293,325,344,362],{"type":51,"tag":190,"props":210,"children":211},{},[212,218],{"type":51,"tag":213,"props":214,"children":215},"td",{"align":196},[216],{"type":57,"value":217},"App Router",{"type":51,"tag":213,"props":219,"children":220},{"align":196},[221,227,229,235,236,242,243,248,249],{"type":51,"tag":83,"props":222,"children":224},{"className":223},[],[225],{"type":57,"value":226},"AppRouterCacheProvider",{"type":57,"value":228},", ",{"type":51,"tag":83,"props":230,"children":232},{"className":231},[],[233],{"type":57,"value":234},"@emotion\u002Fcache",{"type":57,"value":228},{"type":51,"tag":83,"props":237,"children":239},{"className":238},[],[240],{"type":57,"value":241},"options",{"type":57,"value":228},{"type":51,"tag":83,"props":244,"children":246},{"className":245},[],[247],{"type":57,"value":172},{"type":57,"value":118},{"type":51,"tag":83,"props":250,"children":252},{"className":251},[],[253],{"type":57,"value":254},"\u003CSuspense>",{"type":51,"tag":190,"props":256,"children":257},{},[258,263],{"type":51,"tag":213,"props":259,"children":260},{"align":196},[261],{"type":57,"value":262},"Pages Router",{"type":51,"tag":213,"props":264,"children":265},{"align":196},[266,272,273,279,280,286,287],{"type":51,"tag":83,"props":267,"children":269},{"className":268},[],[270],{"type":57,"value":271},"_document",{"type":57,"value":228},{"type":51,"tag":83,"props":274,"children":276},{"className":275},[],[277],{"type":57,"value":278},"_app",{"type":57,"value":228},{"type":51,"tag":83,"props":281,"children":283},{"className":282},[],[284],{"type":57,"value":285},"DocumentHeadTags",{"type":57,"value":228},{"type":51,"tag":83,"props":288,"children":290},{"className":289},[],[291],{"type":57,"value":292},"AppCacheProvider",{"type":51,"tag":190,"props":294,"children":295},{},[296,301],{"type":51,"tag":213,"props":297,"children":298},{"align":196},[299],{"type":57,"value":300},"Fonts",{"type":51,"tag":213,"props":302,"children":303},{"align":196},[304,310,312,317,319],{"type":51,"tag":83,"props":305,"children":307},{"className":306},[],[308],{"type":57,"value":309},"'use client'",{"type":57,"value":311}," theme, ",{"type":51,"tag":83,"props":313,"children":315},{"className":314},[],[316],{"type":57,"value":116},{"type":57,"value":318},", CSS variables on ",{"type":51,"tag":83,"props":320,"children":322},{"className":321},[],[323],{"type":57,"value":324},"html",{"type":51,"tag":190,"props":326,"children":327},{},[328,333],{"type":51,"tag":213,"props":329,"children":330},{"align":196},[331],{"type":57,"value":332},"CSS variables",{"type":51,"tag":213,"props":334,"children":335},{"align":196},[336,342],{"type":51,"tag":83,"props":337,"children":339},{"className":338},[],[340],{"type":57,"value":341},"cssVariables",{"type":57,"value":343},", SSR flicker docs",{"type":51,"tag":190,"props":345,"children":346},{},[347,352],{"type":51,"tag":213,"props":348,"children":349},{"align":196},[350],{"type":57,"value":351},"CSS layers",{"type":51,"tag":213,"props":353,"children":354},{"align":196},[355,360],{"type":51,"tag":83,"props":356,"children":358},{"className":357},[],[359],{"type":57,"value":143},{"type":57,"value":361},", Tailwind \u002F other CSS",{"type":51,"tag":190,"props":363,"children":364},{},[365,370],{"type":51,"tag":213,"props":366,"children":367},{"align":196},[368],{"type":57,"value":369},"Link",{"type":51,"tag":213,"props":371,"children":372},{"align":196},[373],{"type":57,"value":374},"Client wrapper, routing guide, examples repo",{"type":51,"tag":66,"props":376,"children":378},{"id":377},"full-guide",[379],{"type":57,"value":380},"Full guide",{"type":51,"tag":60,"props":382,"children":383},{},[384,386,393],{"type":57,"value":385},"Read ",{"type":51,"tag":387,"props":388,"children":390},"a",{"href":389},".\u002FAGENTS.md",[391],{"type":57,"value":392},"AGENTS.md",{"type":57,"value":394}," for complete steps and doc links.",{"type":51,"tag":60,"props":396,"children":397},{},[398,404],{"type":51,"tag":387,"props":399,"children":401},{"href":400},".\u002Freference.md",[402],{"type":57,"value":403},"reference.md",{"type":57,"value":405}," lists import paths and provider shape.",{"items":407,"total":457},[408,416,431,442],{"slug":4,"name":4,"fn":5,"description":6,"org":409,"tags":410,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[411,412,413,414,415],{"name":26,"slug":27,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"slug":417,"name":417,"fn":418,"description":419,"org":420,"tags":421,"stars":28,"repoUrl":29,"updatedAt":430},"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},[422,425,428,429],{"name":423,"slug":424,"type":15},"CSS","css",{"name":426,"slug":427,"type":15},"Design","design",{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},"2026-07-14T05:19:18.777291",{"slug":432,"name":432,"fn":433,"description":434,"org":435,"tags":436,"stars":28,"repoUrl":29,"updatedAt":441},"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},[437,438,439,440],{"name":423,"slug":424,"type":15},{"name":26,"slug":27,"type":15},{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},"2026-07-14T05:19:20.019149",{"slug":443,"name":443,"fn":444,"description":445,"org":446,"tags":447,"stars":28,"repoUrl":29,"updatedAt":456},"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},[448,449,452,455],{"name":426,"slug":427,"type":15},{"name":450,"slug":451,"type":15},"Themes","themes",{"name":453,"slug":454,"type":15},"TypeScript","typescript",{"name":23,"slug":24,"type":15},"2026-07-14T05:19:17.39816",4,{"items":459,"total":457},[460,468,475,482],{"slug":4,"name":4,"fn":5,"description":6,"org":461,"tags":462,"stars":28,"repoUrl":29,"updatedAt":30},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[463,464,465,466,467],{"name":26,"slug":27,"type":15},{"name":17,"slug":18,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"slug":417,"name":417,"fn":418,"description":419,"org":469,"tags":470,"stars":28,"repoUrl":29,"updatedAt":430},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[471,472,473,474],{"name":423,"slug":424,"type":15},{"name":426,"slug":427,"type":15},{"name":26,"slug":27,"type":15},{"name":23,"slug":24,"type":15},{"slug":432,"name":432,"fn":433,"description":434,"org":476,"tags":477,"stars":28,"repoUrl":29,"updatedAt":441},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[478,479,480,481],{"name":423,"slug":424,"type":15},{"name":26,"slug":27,"type":15},{"name":20,"slug":21,"type":15},{"name":23,"slug":24,"type":15},{"slug":443,"name":443,"fn":444,"description":445,"org":483,"tags":484,"stars":28,"repoUrl":29,"updatedAt":456},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[485,486,487,488],{"name":426,"slug":427,"type":15},{"name":450,"slug":451,"type":15},{"name":453,"slug":454,"type":15},{"name":23,"slug":24,"type":15}]