Словами самого skill
Направляет реализацию Material Design 3 (Material You) от Google с Jetpack Compose Material3 как основной целью, а также Flutter и ограниченным веб-путём через @material/web. Охватывает систему токенов md.sys для цвета, шкалы типографики, формы, возвышения и движения, краткий справочник по 30+ компонентам с их вариантами, адаптивную раскладку и навигацию, темизацию и динамический цвет, матрицу платформ M3 Expressive и доступность.
Режим аудита оценивает приложение или страницу от 0 до 10 по десяти категориям и формирует отчёт о соответствии. Он предназначен для дизайнеров и разработчиков, которым нужны конкретные значения по умолчанию MD3: пять классов размера окна, тональное возвышение вместо теней, система интервалов 8dp и максимальная ширина контента на больших окнах.
Что он выдаёт
- Markdown-отчёт о соответствии MD3 с общей оценкой и оценками по каждой категории, критическими проблемами, предупреждениями, пройденными пунктами и приоритизированными исправлениями.
- Тема Compose, построенная на MaterialTheme с colorScheme, предоставленной dynamicLightColorScheme, lightColorScheme или сгенерированным кодом темы.
- Блок CSS-темы из пользовательских свойств md-sys, включая вариант тёмной темы, применяемый через media query или класс.
Как это работает
- 01Начинайте с Compose, если стек не указывает иначе
Файл рассматривает Jetpack Compose Material3 как путь по умолчанию, и дерево решений направляет оболочки приложений, отдельные компоненты, темы, формы, навигацию и отображение данных к конкретным разделам и справочным файлам ещё до написания кода.
- 02Примените слой токенов
Все токены MD3 находятся в пространстве имён md.sys; Compose сопоставляет те же семантические роли с MaterialTheme.colorScheme, typography и shapes, а веб сопоставляет их с CSS custom properties с префиксом md-sys.
- 03Выберите компоненты в разделе Quick Reference
Таблица компонентов содержит для каждого компонента имя веб-элемента, ключевые варианты и категорию, а также отмечает те, у которых нет реализации @material/web, чтобы их можно было собрать из CSS custom properties и стандартного HTML.
- 04Собирайте с помощью Common Patterns
Паттерны App Shell, Card Grid и Form Layout приведены в виде HTML и CSS, включая breakpoint, который превращает navigation rail в bottom navigation на компактных ширинах.
- 05Аудит по запросу
При вызове с параметром audit skill проверяет URL, файлы исходного кода или работающее приложение и оценивает десять категорий по шкале от 0 до 10, прежде чем составить отчёт.