Material UI agent skills
Four official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
- 99,287 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills consist only of instructions and references
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/material-ui-agent-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills consist only of instructions and references
This is third-party code. Review the repository files before installing.
What it does
The MUI team put guides for the topics where agents most often go wrong into the skills folder. material-ui-styling helps choose between sx, styled(), theme overrides and global CSS. material-ui-theming covers createTheme, design tokens, colorSchemes, CSS variables and TypeScript augmentation. material-ui-nextjs explains App Router and Pages Router setup via @mui/material-nextjs, the Emotion cache, next/font, CSS layers and Link. material-ui-tailwind covers Tailwind v4 layers with enableCssLayer and v3 compatibility settings. Each skill has a SKILL.md index, a full AGENTS.md guide and a reference.md cheat sheet.
Who it is for. For frontend developers building Material UI interfaces with a coding agent.
Good fit when
- MUI styles in Next.js load in the wrong order or flicker during SSR
- You need a theme with dark mode and CSS variables
- The project mixes Tailwind and Material UI and styles conflict
Not a fit when
- The project uses a different component library
- You need MUI X guidance; the skills cover Material UI only
Example request
Set up Material UI in our Next.js App Router project so styles land in head and next/font worksLimitations
The repository has no dedicated install command; the skills are copied manually. They are text guides only and do not check code.
How to disable. Delete the material-ui-* folders from the agent's skills directory.
FAQ
Why both SKILL.md and AGENTS.md?
SKILL.md is a short entry point with an index; AGENTS.md is the full guide the agent reads for a specific topic.
Are there internal MUI team skills here?
The material-ui-review skill in .agents and .claude is for maintainers; the public skills are only in the skills folder.
Discussion
No questions or reviews yet.
Related
SkillsSkills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
README in short
The skills folder README describes each skill's layout (AGENTS.md, SKILL.md, README.md, metadata.json, reference.md) and a catalog of four topics: styling, theming, Next.js and Tailwind. The repository root AGENTS.md links to these guides, so agents that read AGENTS.md find them. The skills were added alongside the Material UI docs and linked from the relevant pages. MIT licensed.
README badge
Original SKILL.md
---
name: material-ui-nextjs
description: Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS 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.
license: MIT
metadata:
author: mui
version: '1.0.0'
---
# Material UI and Next.js
Agent skill for Next.js + Material UI wiring (SSR/streaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.
## When to apply
- New App Router or Pages Router app using `@mui/material`
- Styles missing, wrong order, or in `body` instead of `head`
- `next/font` + `ThemeProvider` / `createTheme`
- Tailwind or CSS Modules + MUI (`enableCssLayer`)
- `Button` + `component={Link}` or Next.js v16 client boundary errors
- `useSearchParams` / URL-driven MUI views and Suspense boundaries
## Sections in AGENTS.md
| Area | Topics |
| :------------ | :-------------------------------------------------------------------------------------- |
| App Router | `AppRouterCacheProvider`, `@emotion/cache`, `options`, `useSearchParams` + `<Suspense>` |
| Pages Router | `_document`, `_app`, `DocumentHeadTags`, `AppCacheProvider` |
| Fonts | `'use client'` theme, `next/font`, CSS variables on `html` |
| CSS variables | `cssVariables`, SSR flicker docs |
| CSS layers | `enableCssLayer`, Tailwind / other CSS |
| Link | Client wrapper, routing guide, examples repo |
## Full guide
Read [AGENTS.md](./AGENTS.md) for complete steps and doc links.
[reference.md](./reference.md) lists import paths and provider shape.