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
Decision gist · record as of 2026-07-15
Material-3 skill guides you through implementing Google's Material Design 3 system in Jetpack Compose with components, theming, and adaptive layouts. 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.
Use it when
- Material-3 includes implementation guidance for 30+ Material Design 3 components such as buttons, cards, navigation bars, scaffolds.
- Material-3 teaches responsive design patterns that adapt to different window sizes and device types.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
hamen/material-3-skill/material-3 · repository language: Shell
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement Material Design 3 components and theming in Jetpack Compose”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Compose Expert is a specialized assistant for developers building UIs with Compose and Compose Multiplatform. It covers state management, animations, layouts, navigation, paging, theming, and design-to-code workflows across Android, iOS, Desktop, and Web platforms. The skill activates on Compose API mentions, design system questions, and GitHub PR reviews.
Wrap CometChat Compose components in `CometChatTheme {}` to apply color schemes, typography, shapes, and dark mode support. Override the primary color, access theme tokens in custom composables, and auto-generate extended primary shades. Use `CompositionLocal` providers to inject theme values throughout your UI.
This skill teaches you to develop Android XR augmented experiences for display glasses using Jetpack Compose Glimmer, Google's UI toolkit designed for transparent, additive displays. You'll master Glimmer design principles, theming with GlimmerTheme, and component implementation while adhering to glasses-specific constraints like minimum text legibility and black backgrounds. Use it to create lightweight, real-world-aware apps that project from a host device to connected eyewear.
Learn to craft responsive Android interfaces using Jetpack Compose and Material Design 3 (Material You). This skill covers adaptive layouts for phones, tablets, and foldables, dynamic color theming, and accessibility best practices.
Master Android development using Kotlin and Jetpack Compose for declarative UI building. Learn clean architecture patterns, dependency injection with Hilt, Room database integration, and Retrofit API calls across phones, tablets, TV, Wear OS, and Android Auto.
This skill guides you through converting Android XML layouts to idiomatic Jetpack Compose code. It provides layout mapping tables for common containers and widgets, attribute translation, and patterns for state migration from LiveData to Compose state. Use it for full rewrites or incremental adoption via ComposeView interop.
More skills native-mobile-developer (MIT) · Create Flutter App Native Ui (unlicensed)