material-3
Material-3 covers Google's Material Design 3 system for building adaptive, personal UIs primarily in Jetpack Compose. It includes 30+ components, a complete token system for color and typography, theming with dynamic color, and responsive layout patterns across window sizes. Also supports Flutter and web implementations.
Material-3 skill guides you through implementing Google's Material Design 3 system in Jetpack Compose with components, theming, and adaptive layouts.
AI-generated summary based on this skill's SKILL.md
Install
hamen/material-3-skill/material-3 · repository language: Shell
git clone https://github.com/hamen/material-3-skill
cp -r material-3-skill/skills/material-3 ~/.claude/skills/material-3Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use Material You in Jetpack Compose?
Material-3 provides a complete Material Design 3 implementation for Jetpack Compose, including 30+ pre-built components and a Material You theming system. To use it, add the Material 3 library to your dependencies, then wrap your composables in a MaterialTheme that applies dynamic color tokens. Material-3 handles color personalization automatically when you use its theme-aware components like Button, Card, and TextField.
What Material 3 components does this skill cover?
Material-3 includes implementation guidance for 30+ Material Design 3 components such as buttons, cards, navigation bars, scaffolds, text fields, and more. Each component follows Material 3 specifications and integrates with the token system for consistent theming. The skill covers both Jetpack Compose and web implementations, with examples for common patterns like forms, lists, and navigation layouts.
How do I build responsive adaptive layouts for mobile, tablet, and foldable devices?
Material-3 teaches responsive design patterns that adapt to different window sizes and device types. It includes guidance on using Compose's layout APIs alongside Material 3 principles to create UIs that work on phones, tablets, and foldables. The skill covers breakpoint strategies, multi-pane layouts, and device-specific considerations to ensure your Material 3 UI remains usable across all form factors.
What is the Material 3 token system and how do I apply it?
Material-3 covers Google's complete token system for color, typography, shape, and motion. Design tokens are semantic values that define your theme—like primary color, headline font size, and corner radius. Material-3 shows how to apply these tokens in Jetpack Compose via MaterialTheme, in CSS for web, and through dynamic color to personalize your app based on user wallpaper or system settings.
How do I set up Material 3 dark theme?
Material-3 includes dark theme setup patterns for both Jetpack Compose and web. In Compose, use MaterialTheme with isSystemInDarkTheme() to detect system preference, then apply a dark color scheme with appropriate contrast ratios. Material-3 covers token adjustments for dark mode, ensuring typography and component colors remain accessible and visually balanced in low-light environments.
Can Material-3 help audit my UI for Material Design 3 compliance?
Material-3 provides best practices and specifications for Material Design 3 compliance, including component behavior, accessibility requirements, and token usage. While the skill focuses primarily on implementation, it covers audit criteria like WCAG accessibility standards, motion easing curves, typography scale adherence, and responsive layout patterns to help you evaluate existing UIs against Material 3 guidelines.
SKILL.md
rendered from the published skill — quoted content, verbatim
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,
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 8 files
skills/material-3/.claude-plugin/plugin.json
skills/material-3/SKILL.md
skills/material-3/references/color-system.md
skills/material-3/references/component-catalog.md
skills/material-3/references/layout-and-responsive.md
skills/material-3/references/navigation-patterns.md
skills/material-3/references/theming-and-dynamic-color.md
skills/material-3/references/typography-and-shape.md