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