Material 3

This implements Google's Material Design 3 (Material You) UI system, primarily targeting Jetpack Compose Material3 with MaterialTheme, components, and adaptive layout. It also covers Flutter and limited web support via @material/web, though that's in maintenance mode. You get guidance on 30+ components, the full token system (color, typography, shape, elevation), layout scaffolds across five window size classes, and dynamic color theming. The skill reflects Google I/O 2026 updates emphasizing Compose-first Android development and expressive layout systems. Use it when you're building with material design, MD3, material you, or working with Jetpack Compose components. It's opinionated about tonal surfaces over shadows and spring-based motion physics as the modern MD3 approach.

skills.sh installs: 3.6K
GitHub stars: 1.6K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

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.