← ClaudeAtlas

material3-design-systemlisted

Comprehensive Material 3 (Material You) design system skill for Jetpack Compose and Compose Multiplatform (KMP). Covers color tokens, typography, shape, 30+ components, adaptive layout, navigation patterns, dynamic color, dark mode, motion/animation, and accessibility. Compose-first — no web or Flutter code.
iammohdzaki/kmp-skills · ★ 2 · Web & Frontend · score 81
Install: claude install-skill iammohdzaki/kmp-skills
# Material Design 3 — KMP / Compose Multiplatform Skill This skill guides implementation of Google's **Material Design 3 (MD3 / Material You)** using **Jetpack Compose** and **Compose Multiplatform** for KMP projects (Android + Desktop). > **Attribution**: This skill is adapted from and gives credit to > **[hamen/material-3-skill](https://github.com/hamen/material-3-skill)** by Hamen. > The original skill covers web and Flutter targets. This KMP edition strips all web/CSS/Flutter > patterns and replaces them with pure Compose Multiplatform APIs, adds the audit report system, > and extends the reference set for adaptive layout, navigation, and versioning. > **Scope**: Compose-only. All examples use `androidx.compose.material3` APIs — the same API > surface is available in KMP `commonMain` via `org.jetbrains.compose.material3:material3` > (declared explicitly in `libs.versions.toml`). No web CSS, no `@material/web` elements, no Flutter. --- ## MD3 Philosophy | Principle | What it means in Compose | |---|---| | **Personal** | Dynamic color from user wallpaper (Android 12+). Static fallback for Desktop. | | **Adaptive** | `WindowSizeClass` drives layout changes across compact → expanded screens. | | **Expressive** | Spring-based motion, shape morphing, emphasized typography. | ### Google I/O 2026 Key Updates - **Compose-first on Android**: For all new Android work, use `androidx.compose.material3`. - **Expressive layout scaffold**: Design screens to adapt across mobile, d