Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →mui/material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals).
Passed 19 of 24 test cases with the skill, and 13 of 24 without it.
and 5 more in the full report
6 fixed13 passed either way5 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
In Next.js 15 App Router, we created a root layout wrapping children in MUI `ThemeProvider` and imported `globals.css` containing Tailwind v4. The MUI styles still override Tailwind utilities on initial load. What explicit option must be added to `StyledEngineProvider` in the layout provider component?
| Checked | Without skill | With skill |
|---|---|---|
| Recommends wrapping children with StyledEngineProvider configured with enableCssLayer: true. | Missed | Passed |
The instructions your model reads when the skill loads.
Agent skill for MUI + Tailwind. SKILL.md is the entry; AGENTS.md is the full guide.
className / slotProps.*.className on MUI components--mui-* variables into Tailwind @theme| Area | Topics |
|---|---|
| v4 | @layer order, mui before utilities |
| Next.js | enableCssLayer, Pages GlobalStyles + shared cache |
| SPA | StyledEngineProvider + enableCssLayer |
| Usage | Root vs slot className |
@theme | Full snippet on docs site; needs cssVariables |
| IntelliSense | VS Code classRegex |
| v3 | preflight, important, injectFirst, portals |
Read AGENTS.md. Copy-paste snippets: reference.md.
test cases passed, vs 13 / 24 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.