material-ui-nextjs — скилл для Next.js: связка MUI, SSR и роутеров
Скилл для связки Material UI с Next.js: SSR, кеш Emotion, next/font, CSS-слои, Link и useSearchParams. Пригодится при настройке или отладке MUI в Next.js-приложении.
npx skills add mui/material-ui --skill material-ui-nextjs -a claude-codeЧто делает material-ui-nextjs
Скилл закрывает типовые места, где Material UI и Next.js не сходятся: стили в body вместо head, неправильный порядок CSS, конфликт next/font с ThemeProvider, проблемы Button с component={Link} и client boundary в Next.js v16. Внутри два файла: SKILL.md как точка входа и AGENTS.md с полным руководством.
Для App Router это AppRouterCacheProvider с @emotion/cache и options, связка useSearchParams с <Suspense>. Для Pages Router — _document, _app, DocumentHeadTags и AppCacheProvider. CSS-переменные темы и работа cssVariables с SSR тоже разобраны.
Отдельный блок — enableCssLayer для совместной работы с Tailwind или CSS Modules. Ещё есть референс reference.md с импортами и формой провайдеров. Если стили MUI перебивают ваши или наоборот, стоит начать с раздела про CSS-слои.
Какие задачи решает
- Починить порядок стилей, когда CSS MUI попадает в body
- Настроить кеш Emotion для App Router
- Подружить next/font с ThemeProvider
- Разобраться с ошибкой client boundary у Button + Link в Next.js v16
- Обернуть useSearchParams в Suspense для URL-управляемых MUI-вью
Примеры запросов агенту
- Настрой Material UI в моём Next.js App Router проекте
- Стили MUI грузятся в body вместо head, что делать?
- Как включить CSS-слои, чтобы MUI не конфликтовал с Tailwind?
Как установить material-ui-nextjs
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-nextjs -a claude-code2Вручную: положить файлы
~/.claude/skills/material-ui-nextjs/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/material-ui-nextjs/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-nextjs -a codex2Вручную: положить файлы
.agents/skills/material-ui-nextjs/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-nextjs -a cursor2Вручную: положить файлы
.cursor/skills/material-ui-nextjs/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mui/material-ui material-ui-nextjs2Вручную: положить файлы
.github/skills/material-ui-nextjs/SKILL.md1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-nextjs -a gemini-cli2Командой платформы
gemini skills install https://github.com/mui/material-ui --path skills/material-ui-nextjsВручную: положить файлы
.devin/skills/material-ui-nextjs/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-nextjs -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора4
Весь набор →Похожие
Вопросы о material-ui-nextjs
Как установить material-ui-nextjs в Claude Code?
Выполните npx skills add mui/material-ui --skill material-ui-nextjs -a claude-code, затем скилл появится в ~/.claude/skills/material-ui-nextjs/SKILL.md.
Что делает material-ui-nextjs?
Настраивает Material UI в Next.js: кеш Emotion для SSR, провайдеры для App и Pages Router, next/font, CSS-слои с Tailwind, паттерн Link и Suspense для useSearchParams.
Зачем нужен enableCssLayer?
Когда MUI соседствует с Tailwind или CSS Modules, порядок слоёв определяет, чьи стили победят. Скилл объясняет, как включить CSS-слои, чтобы MUI не перебивал вашу вёрстку и не пропадал сам.
Исходный текст
SKILL.md · MIT
---
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.
© mui · MIT · mui/material-ui
