AIKraft/AI/Войти
AIKraft/Skills/material-ui-nextjs

material-ui-nextjs

Интегрирует Material UI с Next.js App и Pages роутерами через @mui/material-nextjs, Emotion cache, next/font и CSS layers. Применяется при настройке или отладке MUI в Next.js.

MUMUI official Разработка ★ 99.1k

Что делает навык

Настраивает интеграцию Material UI с Next.js (App и Pages роутерами), обеспечивая корректную SSR/стриминговую рендеринговую цепочку, кэширование Emotion и управление шрифтами. Решает проблемы с порядком стилей, мерцанием при SSR и конфликтами с Tailwind/CSS Modules.

Когда применять

  • Настройка нового приложения на App Router или Pages Router с использованием @mui/material
  • Исправление проблем с отсутствующими стилями, неправильным порядком или их выводом в body вместо head
  • Интеграция next/font с ThemeProvider/createTheme и использование CSS-переменных
  • Работа с Tailwind или CSS Modules совместно с MUI через enableCssLayer
  • Использование Button с component={Link} или устранение ошибок границ клиента в Next.js v16

Как работает

  1. Прочитать AGENTS.md для получения полного руководства и ссылок на документацию
  2. Использовать AppRouterCacheProvider или AppCacheProvider в зависимости от роутера
  3. Настроить @emotion/cache и параметры кэширования для SSR
  4. Применить next/font и ThemeProvider с CSS-переменными на элементе html
  5. Включить enableCssLayer для совместимости с Tailwind или другими CSS
  6. Использовать Client wrapper для компонента Link и Suspense boundaries с useSearchParams

Примеры запросов агенту

Настрой интеграцию Material UI с Next.js App Router, используя AppRouterCacheProvider и Emotion cache
Исправь проблему с мерцанием стилей при SSR в MUI, настроив CSS-переменные и next/font
Объедини Tailwind CSS и Material UI, включив enableCssLayer и настроив порядок слоев

Что понадобится

  • Next.js (App Router или Pages Router)
  • @mui/material
  • next/font

Описание составлено по SKILL.md навыка, сверено 08.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «material-ui-nextjs» из репозитория: # https://github.com/mui/material-ui
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r material-ui-nextjs/ ~/.claude/skills/material-ui-nextjs/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.