material-3

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

1,224stars63forksUpdated 8/16/2026

Developer Tools #jetpack-compose #ui #material-design #flutter #design-system #android

Security Assessment

Safe(100/100)

Security Score100/100

About material-3

The material-3 skill guides implementation of Google's Material Design 3 (Material You) UI system, with Jetpack Compose Material3 as the primary target and additional coverage for Flutter and limited web (@material/web, in maintenance mode). It solves the problem of applying MD3 correctly and consistently by encoding the system's tokens, components, layout rules, theming, and accessibility guidance into an actionable reference, including a decision tree for what you are building and which platform you target.

It is organized around MD3's three principles (personal, adaptive, expressive) and includes updated Google I/O 2026 guidance reinforcing a Compose-first Android path, an expressive layout scaffold that adapts across mobile, desktop, foldables, watches, and XR, an 8dp spacing token system, and refreshed expressive components. The design token system uses the md.sys namespace and maps roles to MaterialTheme colors in Compose. Reference files cover layout and responsive design (five window size classes, canonical Feed and List-Detail layouts, margins and gutters, edge-to-edge and window insets, foldable APIs), color system, typography and shape, navigation patterns, a 30+ component catalog, and theming with dynamic color. It also explains how it composes with a frontend-design skill, where MD3 rules take precedence for component structure and token usage.

It targets Android (Compose) developers primarily, plus Flutter and web developers implementing MD3. It is a design-system reference with code snippets and CSS/Kotlin examples; it contains no scripts, commands, or external calls.

FAQ

Which platforms does it cover?

Primarily Jetpack Compose Material3 (the recommended Compose-first Android path), plus Flutter (useMaterial3, ColorScheme.fromSeed) and limited web via @material/web (maintenance mode) or CSS custom properties for React/Vue/Svelte and CSS-only setups.

How does it handle responsive layout?

It defines five window size classes (Compact through Extra-large) with columns, margins, and gutters, and recommends Compose adaptive APIs (calculateWindowSizeClass, material3.adaptive) over hand-rolled width checks, plus canonical Feed and List-Detail layouts.

What is the token system?

MD3 tokens use the md.sys namespace; in Compose roles map to MaterialTheme.color, and an 8dp spacing scale is applied as tokens for margins, padding, and gaps so layouts adapt by density and device class.

Does it work alongside a general frontend-design skill?

Yes. When both are active, MD3 provides the design system and takes precedence for component structure and token usage, while frontend-design supplies creative direction within those constraints. Notably Roboto/Roboto Flex is the correct MD3 default typeface.