Скиллы Material UI
Material UI agent skills
Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS
- 99 287 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы состоят только из инструкций и справочников
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/material-ui-agent-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы состоят только из инструкций и справочников
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Команда 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 с помощью кодового агента.
Подходит, если
- Стили MUI в Next.js грузятся не в том порядке или мигают при SSR
- Нужно настроить тему с темным режимом и CSS-переменными
- В проекте одновременно Tailwind и Material UI и стили конфликтуют
Не подходит, если
- Проект на другой библиотеке компонентов
- Нужны гайды по MUI X, скиллы покрывают только Material UI
Пример запроса к агенту
Подключи Material UI к нашему Next.js на App Router так, чтобы стили были в head и работал next/fontОграничения
Отдельной команды установки в репозитории нет, скиллы копируются вручную. Это только текстовые руководства без проверки кода.
Как отключить. Удалите папки material-ui-* из каталога скиллов агента.
Частые вопросы
Зачем в скилле и SKILL.md, и AGENTS.md?
SKILL.md это короткая точка входа с оглавлением, AGENTS.md полный гайд, который агент читает, когда нужна конкретная тема.
Есть ли тут внутренние скиллы команды MUI?
Скилл material-ui-review в .agents и .claude служит мейнтейнерам, публичные скиллы лежат только в папке skills.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скиллы Preline UI для агентов: сборка интерфейсов из компонентов Tailwind CSS и генерация тем по токенам
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Коротко о README
README папки skills описывает структуру каждого скилла (AGENTS.md, SKILL.md, README.md, metadata.json, reference.md) и каталог из четырех тем: стилизация, темы, Next.js и Tailwind. Корневой AGENTS.md репозитория ссылается на эти гайды, поэтому агенты, читающие AGENTS.md, находят их сами. Скиллы добавлены в документацию Material UI и связаны с соответствующими страницами. Лицензия MIT.
Бейдж для README
Исходный 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.