material-ui-theming — скилл для Claude Code: темы и токены дизайна
Скилл для создания и управления темами Material UI: палитры, цветовые схемы, CSS-переменные, переключение light/dark и TypeScript-расширения. Пригодится, если вы строите дизайн-систему или меняете визуальную идентичность приложения.
npx skills add mui/material-ui --skill material-ui-theming -a claude-codeЧто делает material-ui-theming
Скилл направляет работу с createTheme, ThemeProvider и useTheme. Охватывает основы: где размещать провайдер, как составлять токены (палитра, типография, интервалы, точки останова). Показывает, как настроить colorSchemes для light/dark режимов, включить CSS-переменные через cssVariables: true и избежать мерцания при гидратации.
Внутри есть разделы по составлению многоуровневых тем через deepmerge, вложению нескольких провайдеров и расширению типов Theme и ThemeOptions для пользовательских токенов. TypeScript-фрагменты собраны в отдельном файле.
Для работы нужен Node.js и уже установленный Material UI в проекте. Скилл готов к использованию сразу после добавления в IDE.
Какие задачи решает
- создать и настроить тему Material UI с палитрой и типографией
- переключать между light и dark режимами с сохранением выбора
- использовать CSS-переменные вместо объектов темы
- расширить стандартные токены под свою дизайн-систему
- избежать мерцания при восстановлении темы на стороне клиента
Примеры запросов агенту
- Помоги мне создать тему Material UI с кастомной палитрой и типографией
- Как добавить toggle для light/dark режимов с localStorage?
- Настрой cssVariables для Material UI и покажи, как использовать theme.vars в компонентах
Как установить material-ui-theming
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-theming -a claude-code2Вручную: положить файлы
~/.claude/skills/material-ui-theming/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/material-ui-theming/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-theming -a codex2Вручную: положить файлы
.agents/skills/material-ui-theming/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-theming -a cursor2Вручную: положить файлы
.cursor/skills/material-ui-theming/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mui/material-ui material-ui-theming2Вручную: положить файлы
.github/skills/material-ui-theming/SKILL.md1Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-theming -a gemini-cli2Командой платформы
gemini skills install https://github.com/mui/material-ui --path skills/material-ui-themingВручную: положить файлы
.devin/skills/material-ui-theming/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mui/material-ui --skill material-ui-theming -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора4
Весь набор →Похожие
Вопросы о material-ui-theming
Как установить material-ui-theming в Claude Code?
Выполни npx skills add mui/material-ui --skill material-ui-theming -a claude-code. Скилл будет доступен в ~/.claude/skills/material-ui-theming/SKILL.md.
Что делает этот скилл?
Даёт инструкции по созданию тем Material UI: как работают createTheme и ThemeProvider, как настроить палитру, включить множество цветовых схем, использовать CSS-переменные и расширить типы для кастомных токенов.
Нужен ли Material UI, чтобы использовать скилл?
Да, Material UI должен быть уже установлен в проекте. Скилл — это набор рекомендаций для работы с его API, а не сам пакет.
Исходный текст
SKILL.md · MIT
---
name: material-ui-theming
description: Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.
license: MIT
metadata:
author: mui
version: '1.0.0'
---
# Material UI theming and design tokens
Agent skill for theme creation, design tokens, light/dark, and CSS theme variables. SKILL.md is the entry; AGENTS.md is the full guide.
## When to apply
- `createTheme`, `ThemeProvider`, `useTheme`, `CssBaseline`
- `colorSchemes`, `useColorScheme`, storage / SSR behavior
- `cssVariables: true`, `theme.vars`, `applyStyles('dark', …)`
- Custom theme keys and TypeScript module augmentation
## Sections in AGENTS.md
| Area | Topics |
| :------------ | :-------------------------------------------------------------- |
| Core setup | Imports, provider placement, `useTheme` |
| Token map | palette, typography, spacing, shape, breakpoints, components, … |
| Palette | `main` / derived colors, `@mui/material/colors`, `mode` |
| Color schemes | vs palette-only, hydration, `ThemeProvider` props |
| CSS variables | `cssVariables`, reserved `vars`, flicker avoidance |
| Composition | Multi-step `createTheme`, `deepmerge`, nesting providers |
| Custom tokens | Augmenting `Theme` / `ThemeOptions` |
## Full guide
Read [AGENTS.md](./AGENTS.md) for the complete instructions and links.
TypeScript snippets: [reference.md](./reference.md).
© mui · MIT · mui/material-ui
