# material-ui

Правило задаёт Cursor единый стиль работы с Material-UI: структура папок, тема, стили и компоненты. Пригодится, если проект на React с MUI растёт и хочется одинаковых решений.

- правило · `type=rule` · Cursor · ★ 3579
- Автор: sanjeed5
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/material-ui.mdc
- Обновлён: 2026-05-19
- HTML: https://affpapa.org/nevibecode/rules/material-ui

## Что делает

Файл описывает, как писать React-приложения на Material-UI. Внутри — разделы про организацию кода, темизацию, стилизацию и архитектуру компонентов. Cursor подхватывает эти указания и учитывает их при генерации и правке файлов.

Код советуют раскладывать по фичам, а не по типам: переиспользуемые компоненты лежат в `src/components/`, логика конкретных экранов — в `src/features/`, тема — в `src/theme/`. Тема собирается через `createTheme` и подключается `ThemeProvider`, а `CssBaseline` идёт рядом. Менять объект темы после создания нельзя: правило прямо помечает такой код как плохой, потому что изменения не реактивны. Для разовых правок есть проп `sx`, для повторяемых стилей — `styled` из `@mui/material/styles`. Пакет `@mui/styles` с `makeStyles` помечен как устаревший, инлайн-стили тоже не приветствуются.

Компоненты — только функциональные, с хуками. Правило требует держать их мелкими и собирать из частей. Globs `**/*` означает, что файл действует на весь проект, поэтому в репозитории с уже сложившимся стилем кода он начнёт спорить с ним. Стоит заранее решить, готовы ли вы переписать старые места под эти требования.

## Установка

### Cursor (родная платформа)

**Вручную: положить файлы**
- Файл: `.cursor/rules/material-ui.mdc` — Во frontmatter: description, globs, alwaysApply

### Claude Code

**Вручную: положить файлы**
- Файл: `.claude/rules/material-ui.md` — Поле paths во frontmatter ограничивает файлы: globs из источника → paths

### Codex

**AGENTS.md**
- Codex читает AGENTS.md: вставьте текст правила туда

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/instructions/material-ui.instructions.md` — Поле applyTo задаёт, к каким файлам применять: globs из источника → applyTo

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/rules/material-ui.md`

### Cline

**Вручную: положить файлы**
- Файл: `.clinerules/material-ui.md`

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/sanjeed5/awesome-cursor-rules-mdc/tree/HEAD/rules-mdc/material-ui.mdc

## Когда брать
- разложить React-проект по фичам вместо папок по типам файлов
- собрать единую тему MUI и не менять её объект вручную
- выбрать между пропом `sx` и `styled` для конкретного случая
- убрать устаревший `makeStyles` из `@mui/styles`
- перевести классовые компоненты на функции с хуками

## Примеры запросов агенту
- создай компонент карточки товара по правилам material-ui
- перепиши этот компонент на функциональный с хуками, как требует material-ui
- добавь стили через `styled` в отдельный `.styled.js` файл

## Похожие
- [material-ui-styling](https://affpapa.org/nevibecode/skills/material-ui-styling.md) — скилл · 688 установок
- [material-ui-nextjs](https://affpapa.org/nevibecode/skills/material-ui-nextjs.md) — скилл · 727 установок
- [frontend-dev-guidelines](https://affpapa.org/nevibecode/skills/sickn33-frontend-dev-guidelines.md) — скилл · 1500 установок
- [mui-base](https://affpapa.org/nevibecode/skills/mui-base.md) — скилл · 328 установок
- [material](https://affpapa.org/nevibecode/skills/material.md) — скилл · 2400 установок
- [material-3-expressive](https://affpapa.org/nevibecode/skills/material-3-expressive.md) — скилл · 502 установки

Из того же набора: [sanjeed5/awesome-cursor-rules-mdc](https://affpapa.org/nevibecode/by/sanjeed5/awesome-cursor-rules-mdc.md) — 69 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md