Скиллы Material UI

Установка

Скопируй нужные папки из skills/ репозитория mui/material-ui (material-ui-styling, material-ui-theming, material-ui-nextjs, material-ui-tailwind) в каталог скиллов агента. При работе читай SKILL.md, а за деталями AGENTS.md.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Команда MUI собрала в папке skills руководства по темам, где агенты чаще всего ошибаются. material-ui-styling помогает выбрать между sx, styled(), переопределениями темы и глобальным CSS. material-ui-theming объясняет createTheme, дизайн-токены, colorSchemes, CSS-переменные и расширение типов TypeScript. material-ui-nextjs описывает подключение к App Router и Pages Router через @mui/material-nextjs, кеш Emotion, next/font, CSS-слои и Link. material-ui-tailwind разбирает слои Tailwind v4 с enableCssLayer и настройки совместимости для v3. В каждом скилле есть SKILL.md с оглавлением, полный гайд AGENTS.md и шпаргалка reference.md.

Для кого. Для фронтенд-разработчиков, которые собирают интерфейсы на Material UI с помощью кодового агента.

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

Подключи Material UI к нашему Next.js на App Router так, чтобы стили были в head и работал next/font

Ограничения

Отдельной команды установки в репозитории нет, скиллы копируются вручную. Это только текстовые руководства без проверки кода.

Как отключить. Удалите папки material-ui-* из каталога скиллов агента.

Проверка безопасности

• Скиллы состоят только из инструкций и справочников

Коротко о README

README папки skills описывает структуру каждого скилла (AGENTS.md, SKILL.md, README.md, metadata.json, reference.md) и каталог из четырех тем: стилизация, темы, Next.js и Tailwind. Корневой AGENTS.md репозитория ссылается на эти гайды, поэтому агенты, читающие AGENTS.md, находят их сами. Скиллы добавлены в документацию Material UI и связаны с соответствующими страницами. Лицензия MIT.

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.

Похожие