← ClaudeAtlas

m3-expressivelisted

Use when designing or implementing UI with Material Design 3 or M3 Expressive — Material components, motion springs, shape morphing, emphasized typography, color roles, adaptive layouts. Also for Material You, Jetpack Compose / MDC-Android / Flutter / web Material UI, making a UI feel "expressive", or reviewing a design against M3 guidelines.
abhixv/m3-expressive-design-skill · ★ 6 · Web & Frontend · score 63
Install: claude install-skill abhixv/m3-expressive-design-skill
# Material 3 Expressive M3 Expressive is an **evolution of Material 3**, not a new version — M3 is not deprecated and this isn't "M4". It adds features, updated components, and design tactics for emotionally impactful UX. The Usability guidelines name its design tactics as **containment, size, shape, color, and typography** — a non-exhaustive list; the blog's seven tactics also cover **motion** and component flexibility. Backed by Material's most-researched update since 2014 (46 studies, 18,000+ participants). The headline finding is that this is a **usability** mechanism, not a decorative one: participants spotted key UI elements **up to 4× faster** in expressive screens. So every expressive choice must answer one question — **does this guide attention to what matters on this screen?** If not, it's noise. ## Source contract — read this before writing any spec M3 has exact published values. Stating a plausible-sounding number instead of the real one is the main way this work goes wrong, and it is invisible to the reader. **Every number, token name, and component name you state comes from this skill's references.** Look it up. `tokens.md` has the numeric bedrock; `components/*.md` has per-component placement and behavior; `component-tokens.md` has the per-component dp geometry — including the measurements m3.material.io publishes only inside images, so check there before concluding a value is unavailable. When a value you need is genuinely not in M3, write it as **two la