material-ui-styling — скилл для Claude Code: выбор стилей Material UI
Подсказывает агенту, каким слоем стилизовать компоненты Material UI: sx, styled(), темой или глобальным CSS. Пригодится, когда правок много и важно не раздуть проект лишней вложенностью.
npx skills add mui/material-ui --skill material-ui-styling -a claude-codeЧто делает material-ui-styling
Скилл заставляет агента выбирать стилизацию по принципу «от узкого к широкому»: сначала sx для локальных правок, потом styled() для переиспользуемых обёрток, затем переопределения в теме через createTheme({ components }) и только в конце глобальные стили.
Внутри два файла: SKILL.md — точка входа с индексом, AGENTS.md — полное руководство с примерами и ссылками на документацию MUI. Отдельная таблица в reference.md сравнивает sx и styled(): сокращения темы, работа со spacing и типичные грабли.
Установка простая: npx skills add mui/material-ui --skill material-ui-styling -a claude-code для Claude Code, для других платформ меняется только флаг -a. После установки скилл лежит в ~/.claude/skills/material-ui-styling/. Лицензия MIT, автор — команда MUI, так что расхождения с официальной документацией маловероятны.
Какие задачи решает
- выбрать между sx, styled() и темой без чтения всей документации
- переопределить слот компонента MUI, не сломав состояние
- разобраться, чем
sxотличается отstyled()при работе со spacing - настроить одинаковый вид всех экземпляров компонента через тему
- добавить глобальные стили через
GlobalStylesилиCssBaseline
Примеры запросов агенту
- примени скилл material-ui-styling и скажи, каким слоем лучше стилизовать этот `TextField`
- как переопределить слот `root` у `Button`, чтобы не задеть hover-состояние
- сравни `sx` и `styled()` для переиспользуемого `Card`, посоветуй по материалу MUI
Как установить material-ui-styling
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-styling -a claude-code2Вручную: положить файлы
~/.claude/skills/material-ui-styling/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/material-ui-styling/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-styling -a codex2Вручную: положить файлы
.agents/skills/material-ui-styling/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-styling -a cursor2Вручную: положить файлы
.cursor/skills/material-ui-styling/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mui/material-ui material-ui-styling2Вручную: положить файлы
.github/skills/material-ui-styling/SKILL.md1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-styling -a gemini-cli2Командой платформы
gemini skills install https://github.com/mui/material-ui --path skills/material-ui-stylingВручную: положить файлы
.devin/skills/material-ui-styling/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-styling -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора4
Весь набор →Похожие
Вопросы о material-ui-styling
Как установить material-ui-styling в Claude Code?
Выполните npx skills add mui/material-ui --skill material-ui-styling -a claude-code. После установки скилл появится в ~/.claude/skills/material-ui-styling/SKILL.md.
Что делает material-ui-styling?
Помогает агенту выбрать слой стилизации Material UI: sx для разовых правок, styled() для обёрток, createTheme({ components }) для всех экземпляров, GlobalStyles и CssBaseline для базовых и глобальных стилей.
Чем `sx` отличается от `styled()` в этом скилле?
sx подходит для локальных правок на месте, styled() — когда нужна переиспользуемая обёртка. Скилл содержит отдельную таблицу с различиями в семантике: сокращения темы, работа со spacing и подводные камни.
Исходный текст
SKILL.md · MIT
---
name: material-ui-styling
description: Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.
license: MIT
metadata:
author: mui
version: '1.0.0'
---
# Material UI styling
Agent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; AGENTS.md is the full guide.
## When to apply
- Choosing among `sx`, `styled()`, theme `components`, or global CSS for a change
- Overriding component slots or state safely
- Comparing `sx` vs `styled()` semantics (spacing, theme shortcuts)
## Sections in AGENTS.md (by priority)
| Order | Topic | Scope |
| :---- | :----------------------------- | :------------------------------------ |
| 1 | Quick decision | Pick `sx` → `styled` → theme → global |
| 2 | `sx` prop | One-off / local |
| 3 | `styled()` | Reusable wrapper |
| 4 | `createTheme({ components })` | All instances |
| 5 | `GlobalStyles` / `CssBaseline` | HTML baseline / globals |
| 6 | `sx` vs `styled()` table | Foot-gun prevention |
## Full guide
Read [AGENTS.md](./AGENTS.md) for the complete instructions, examples, and doc links.
Supplementary tables: [reference.md](./reference.md).
© mui · MIT · mui/material-ui
