Каждый раз, когда я верстаю интерфейс по Material Design 3, уходит время на одни и те же задачи: проверка цветовых токенов, выбор правильного компонента, соответствие elevation и shape спецификации. Документация на m3.material.io — это SPA, которая медленно загружается и неудобна в поиске.

Что это делает

material-3-skill — скилл для Claude Code, превращающий его в эксперта по Material Design 3. Устанавливается в ~/.claude/skills/ и добавляет команду /material-3.

Он поддерживает четыре режима:

Генерация компонентов. Описываете нужный элемент — получаете код с правильными токенами.

Claude Code возвращает Jetpack Compose-код с MaterialTheme, корректными OutlinedTextField, FilledButton, отступами и elevation. Это не «похоже на Material» — это код, соответствующий спеке.

Генерация темы. Указываете seed-цвет — получаете полную цветовую схему.

На выходе — ColorScheme с primary, secondary, tertiary, surface, error и всеми производными (onPrimary, primaryContainer и т.д.), включая тёмную тему. Всё по алгоритму Material You.

Scaffold приложения. Каркас с адаптивной навигацией.

Формируется адаптивный шаблон: bottom navigation на телефонах, navigation rail на планшетах, navigation drawer на десктопах — с правильными breakpoint’ами из MD3.

Аудит. Самая полезная функция — проверка готового приложения на соответствие MD3.

Скилл анализирует код по 10 категориям: цветовые токены, типографика, shape, elevation, компоненты, layout, навигация, motion, доступность и темизация. Выдаёт оценку и конкретные замечания с предложениями по исправлению.

Compose-first, но не Compose-only

Скилл ориентирован на Jetpack Compose — это основная платформа. Но поддерживает и другие:

• Jetpack Compose: полная поддержка — каталог, API, Expressive
• Flutter: вторичная — ThemeData(useMaterial3: true), ColorScheme.fromSeed
• Web: ограниченная — @material/web в режиме сопровождения, без Expressive

Для веба скилл честно предупреждает: Material Web не развивается, M3 Expressive на вебе не реализован. Можно использовать токены и компоненты, но новые функции не появятся. Такая прозрачность ценна — многие инструменты обещают «всё и сразу».

Что внутри: структура файлов

Каждый reference-файл — это дистиллят официальной документации с m3.material.io, Android Developers и AndroidX Compose Material3 API. Это не копия, а обобщённые таблицы токенов, шаблоны компонентов, примеры layout’ов, приведённые к единому формату.

Аудит — самая полезная часть

Генерация компонентов удобна, но Claude Code и без скилла неплохо справляется с Material-подобным кодом. А вот аудит — уникальная функция, которой нет в других инструментах.

Проверка охватывает 10 категорий:

1. Color tokens: используются ли MaterialTheme.colorScheme.primary или захардкожены цвета вроде #1A73E8
2. Typography: применены ли правильные стили из MaterialTheme.typography
3. Shape: соответствуют ли скругления токенам (small, medium, large, extraLarge)
4. Elevation: корректны ли уровни тени для каждого компонента
5. Components: используются ли стандартные компоненты вместо самодельных
6. Layout: адаптивность, breakpoints, канонические макеты
7. Navigation: правильный тип навигации для размера экрана
8. Motion: Expressive-анимации и переходы
9. Accessibility: контрастность, размеры touch-зон, описания контента
10. Theming: динамические цвета, тёмная тема, палитры на основе seed

Результат — отчёт с оценкой по каждой категории и указанием конкретных строк кода для исправления. Для проектов с дизайнерским ревью это экономит часы работы.

M3 Expressive — новый слой (май 2025)

Скилл поддерживает M3 Expressive — обновление Material Design 3 с акцентами в типографике, новыми формами-морфингами и расширенными паттернами анимации. Поддержка зависит от платформы:

• Compose: motion и emphasized type доступны
• Flutter: частичная поддержка через community-пакеты
• Web: не реализовано и не планируется

Скилл включает матрицу совместимости — перед использованием Expressive-возможностей можно проверить их доступность на вашей платформе.

Ограничения

Compose-first. Если вы работаете с Flutter или вебом — скилл полезен, но не оптимален. Основные примеры и маппинги заточены под Compose.

Может устаревать. Скилл основан на документации на момент создания. При обновлении спецификации Google он может отставать, пока не будет обновлён. Для точных API-сигнатур стоит сверяться с официальными Android-документами.

Не заменяет дизайнера. Скилл генерирует технически корректный код, но не принимает дизайн-решения. Выбор seed-цвета или необходимости FAB остаётся за вами.

Каждый раз, когда я верстаю интерфейс по Material Design 3, уходит время на одно и то же: проверить токены цветов, найти правильный компонент, убедиться что elevation и shape соответствуют спеке. Документация на m3.material.io — SPA, которое грузится медленно и искать по нему неудобно.

На GitHub появился скилл для Claude Code, который решает эту проблему: 30+ компонентов с маппингами на Jetpack Compose, система дизайн-токенов, генерация тем из seed-цвета и аудит готового приложения на соответствие MD3. 454 звезды за четыре дня — проект зацепил.

Что это делает

material-3-skill— скилл для Claude Code, который превращает его в эксперта по Material Design 3. Устанавливается в~/.claude/skills/и добавляет команду/material-3.

Четыре режима:

Генерация компонентов.Описываете, что нужно — получаете код с правильными токенами.

Claude Code выдаст Compose-код сMaterialTheme, правильнымиOutlinedTextField,FilledButton, корректными отступами и elevation. Не «что-то похожее на Material», а код, который соответствует спеке.

Генерация темы.Даёте seed-цвет — получаете полную тему.

На выходе —ColorSchemeс primary, secondary, tertiary, surface, error и всеми вариантами (onPrimary, primaryContainer и т.д.), плюс тёмная тема. Всё по алгоритму тональных палитр Material You.

Scaffold приложения.Каркас с адаптивной навигацией.

Получаете адаптивный каркас: на телефоне — bottom navigation, на планшете — navigation rail, на десктопе — navigation drawer. С правильными breakpoint’ами из MD3.

Аудит.Самое интересное — проверка готового приложения на соответствие MD3.

Скилл анализирует код по 10 категориям: цветовые токены, типографика, shape, elevation, компоненты, layout, навигация, motion, accessibility, theming. Выдаёт оценку и конкретные замечания с предложениями исправлений.

Compose-first, но не Compose-only

Скилл приоритизирует Jetpack Compose — это основная платформа. Но покрывает и другие:

Уровень поддержки

Jetpack Compose

Основная — полный каталог, API, Expressive

Вторичная —ThemeData(useMaterial3: true),ColorScheme.fromSeed

Ограниченная —@material/webв maintenance mode, без Expressive

Для веба честно предупреждает: Material Web не развивается, M3 Expressive на вебе не реализован. Используйте токены и компоненты, но знайте, что новые фичи туда не придут. Честность ценю — многие скиллы обещают «всё для всех».

Что внутри: структура файлов

Каждый reference-файл — это выжимка из официальной документации m3.material.io, Android Developers и AndroidX Compose Material3 API. Не копия — дистилляция: таблицы токенов, шаблоны компонентов, примеры layout’ов, нормализованные для единообразия.

Аудит — самая полезная часть

Генерация компонентов — это удобно, но Claude Code и без скилла неплохо пишет Material-подобный код. А вот аудит — это то, чего нет нигде.

10 категорий проверки:

1. Color tokens— используете лиMaterialTheme.colorScheme.primaryили захардкодили#1A73E8
2. Typography— правильные ли стили текста изMaterialTheme.typography
3. Shape— соответствуют ли скругления токенам (small, medium, large, extraLarge)
4. Elevation— правильные ли уровни тени для каждого компонента
5. Components— используете ли стандартные компоненты или самодельные аналоги
6. Layout— адаптивность, breakpoints, canonical layouts
7. Navigation— правильный ли тип навигации для каждого размера экрана
8. Motion— Expressive анимации, transitions
9. Accessibility— контрастность, touch targets, content descriptions
10. Theming— dynamic color, dark mode, seed-based палитры

На выходе — отчёт с оценкой по каждой категории и конкретными строками кода, которые нужно исправить. Для проектов, которые проходят дизайн-ревью — экономит часы.

M3 Expressive — новый слой (май 2025)

Скилл покрывает M3 Expressive — обновление Material Design 3, которое добавило emphasis в типографику, новые shape-морфинги и расширенные motion-паттерны. Поддержка зависит от платформы:

• Compose— motion и emphasized type доступны
• Flutter— частичная поддержка через community-пакеты
• Web— не реализовано, не планируется

Скилл содержит матрицу поддержки по платформам — перед использованием Expressive-фич можно проверить, доступны ли они на вашей платформе.

Или симлинк для автообновлений:

После этого в Claude Code доступна команда/material-3.

Ограничения

Compose-first.Если вы пишете на Flutter или для веба — скилл полезен, но не оптимален. Основные примеры и маппинги — под Compose.

Может устаревать.Скилл — дистилляция документации на момент создания. Если Google обновит спеку — скилл отстанет, пока не обновят. Для точных API-сигнатур лучше сверяться с официальными Android-доками.

Не заменяет дизайнера.Скилл генерирует технически корректный MD3-код, но не принимает дизайн-решения за вас. «Какой seed-цвет выбрать» и «нужен ли здесь FAB» — всё ещё ваша работа.

Репозиторий:github.com/hamen/material-3-skill

Используете Material Design 3 в проектах? Как решаете проблему соответствия гайдлайнам — ручной аудит, линтеры, или доверяете глазу?