mui — скилл для Claude Code: работа с MUI и установка
Скилл помогает Claude Code писать интерфейсы на Material UI v7, настраивать стили через sx, работать с темой и адаптивной вёрсткой.
npx claude-code-templates@latest --skill development/muiЧто делает mui
Скилл содержит рекомендации по работе с компонентами Material UI v7 в проектах на React и TypeScript. Он охватывает контейнеры Box и Paper, сетку Grid, текстовые блоки Typography, кнопки и формы. Примеры показывают, как задавать стили через sx, использовать цвета и отступы из темы, а также менять размеры элементов в зависимости от ширины экрана.
Для небольших компонентов скилл предлагает хранить стили рядом с кодом, а для объёмных компонентов выносить их в отдельный файл, например UserProfile.styles.ts. Также разобраны useTheme, типы SxProps и Theme, обработка полей формы и настройка адаптивной типографики. Эти материалы помогают агенту придерживаться последовательной структуры компонентов.
В MUI v7 изменился ряд API по сравнению с v6. В частности, вместо удалённого onBackdropClick у Modal следует использовать onClose, а для настройки компонентов предусмотрены slots и slotProps. Если проект использует Tailwind v4, скилл также описывает настройку CSS layers через enableCssLayer.
Какие задачи решает
- Оформить компоненты React с помощью
sx - Подключить цвета и отступы из темы MUI
- Собрать адаптивную сетку для карточек
- Вынести стили крупного компонента в отдельный файл
- Обновить обработчики и настройки компонентов под MUI v7
Примеры запросов агенту
- Оформи страницу профиля с помощью
Box,PaperиTypography, используя стилиsx. - Сделай сетку карточек адаптивной через
Gridи брейкпоинты MUI. - Обнови компонент
Modalдля MUI v7 и замени устаревшийonBackdropClickнаonClose.
Как установить mui
1Через claude-code-templates
npx claude-code-templates@latest --skill development/mui2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill mui -a claude-code3Вручную: положить файлы
~/.claude/skills/mui/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mui/
Вручную: положить файлы
.agents/skills/mui/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/mui/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates mui2Вручную: положить файлы
.github/skills/mui/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/muiВручную: положить файлы
.devin/skills/mui/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mui
Как установить mui в Claude Code?
Перейди в каталог проекта и выполни npx claude-code-templates@latest --skill development/mui. Альтернативный способ: npx skills add davila7/claude-code-templates --skill mui -a claude-code. Путь к файлу установленного скилла: ~/.claude/skills/mui/SKILL.md.
Что делает скилл mui?
Он даёт Claude Code рекомендации по использованию Material UI v7: оформлению через sx, настройке темы, созданию адаптивных макетов и работе с компонентами и формами.
Что изменилось в MUI v7 по сравнению с v6?
Для Modal удалён onBackdropClick, вместо него используется onClose. Компоненты перешли на стандартизированный подход с slots и slotProps, а глубокие импорты следует заменить импортами через экспорты пакета.
