Material UI agent skills

Install

Copy the folders you need from skills/ in the mui/material-ui repository (material-ui-styling, material-ui-theming, material-ui-nextjs, material-ui-tailwind) into the agent's skills directory. Read SKILL.md first and AGENTS.md for details.

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.

Example request

Set up Material UI in our Next.js App Router project so styles land in head and next/font works

Limitations

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.

Security check

• The skills consist only of instructions and references

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.

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.

Related