AI导哈

前端开发

material-3

hamen/material-3-skill

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".

  • 3358 次安装
  • 1500 星标
  • 收录于

安装命令

npx skills add https://github.com/hamen/material-3-skill --skill material-3

SKILL.md

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.

Current Updates: Google I/O 2026

Material's Google I/O 2026 update reinforces a Compose-first Android path and expands expressive/adaptive guidance: