Material Design 3 Skill

Установка

npx skillfoxx add skills/material-design-3-skill

npx skills add hamen/material-3-skill --skill material-3 -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .claude/skills
cp -R "$tmp/skills/material-3" .claude/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .github/skills
cp -R "$tmp/skills/material-3" .github/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .devin/skills
cp -R "$tmp/skills/material-3" .devin/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .cline/skills
cp -R "$tmp/skills/material-3" .cline/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .roo/skills
cp -R "$tmp/skills/material-3" .roo/skills/material-3

npx skills add hamen/material-3-skill --skill material-3 -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/material-3/
git -C "$tmp" checkout 14385f2bf3804d8779f8b4db2604211f1e70b4c1
mkdir -p .agents/skills
cp -R "$tmp/skills/material-3" .agents/skills/material-3

npx --yes skills add hamen/material-3-skill --skill material-3 -y

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту справочник по системе Google Material Design 3, чтобы он генерировал интерфейсы с правильными токенами, компонентами, темами, версткой и доступностью. Основной упор на Jetpack Compose, вторично покрыт Flutter, а веб на пакете @material/web помечен как ограниченный, потому что он в режиме поддержки и без части выразительных возможностей. В каталоге более 30 компонентов с привязками к Compose и веб-элементам. Есть режим аудита, который оценивает интерфейс по десяти категориям, от цветовых токенов и типографики до навигации, анимаций и доступности, и выдает отчет с конкретными правками. Материал охватывает M3 Expressive и обновления с Google I/O 2026. Автор указывает, что это дистилляция публичных источников, а не официальная документация.

Для кого. Для разработчиков и дизайнеров на Jetpack Compose, Flutter или вебе, которым нужен интерфейс по Material Design 3.

Пример запроса к агенту

Собери форму входа по Material Design 3 с полями почты и пароля на Jetpack Compose

Ограничения

Это дистилляция публичных источников, а не официальная документация, содержимое может отставать от обновлений спецификации. Веб-путь ограничен: пакет @material/web в режиме поддержки, M3 Expressive для веба не реализован. Точные сигнатуры API и версии для Compose стоит сверять с документацией Android. Нужен агент, который умеет загружать файлы SKILL.md.

Как отключить. Удалите скилл material-3 через /plugin, если ставили как плагин, или удалите либо отвяжите папку skills/material-3 из каталога скиллов вашего агента.

Проверка безопасности

• Скилл состоит только из инструкций и справочников по дизайн-системе

Коротко о README

README описывает скилл по Material Design 3 для агентов, которые загружают файлы SKILL.md, с упором на Jetpack Compose, вторичным Flutter и ограниченным вебом на @material/web. В комплекте главный SKILL.md и справочники по цвету, компонентам, темам, типографике, навигации и адаптивной верстке, каталог из более чем 30 компонентов и режим аудита по десяти категориям. Учтены M3 Expressive и обновления с Google I/O 2026. Ставится через npx skills или как плагин Claude Code из манифеста marketplace.json, для Codex и других агентов через симлинк папки skills/material-3. Материал собран из публичных источников, лицензия MIT.

SKILL.md

---
name: material-3
description: >
  Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose
  Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web
  (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming,
  M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3",
  "material you", "Jetpack Compose", "MaterialTheme", "material component", "md3 button".
user-invokable: true
argument-hint: "[component|theme|layout|scaffold|audit] [description or URL]"
---

# Material Design 3

This skill guides implementation of Google's Material Design 3 (MD3), a personal, adaptive, expressive design system. MD3 uses dynamic color, tonal surfaces, rounded shapes, and spring-based motion to create UIs that feel alive and personal.

## Philosophy

MD3 is built on three principles:
- Personal: Dynamic color adapts UI to the user's wallpaper or content. Theming is individual, not one-size-fits-all.
- Adaptive: Layouts transform across 5 window size classes. Components resize, reposition, and change form factor responsively.
- Expressive: Shape morphing, spring physics, and emphasized typography create moments of delight without sacrificing usability.

Похожие