{"enrichment":{"faq":[{"a":"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.","q":"How do I use Material You in Jetpack Compose?"},{"a":"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.","q":"What Material 3 components does this skill cover?"},{"a":"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.","q":"How do I build responsive adaptive layouts for mobile, tablet, and foldable devices?"},{"a":"Material-3 covers Google's complete token system for color, typography, shape, and motion. Design tokens are semantic values that define your theme\u2014like 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.","q":"What is the Material 3 token system and how do I apply it?"},{"a":"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.","q":"How do I set up Material 3 dark theme?"},{"a":"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.","q":"Can Material-3 help audit my UI for Material Design 3 compliance?"}],"shadow_tags":["design-system","adaptive-layout","dynamic-theming","component-library","responsive-design","motion-physics","token-based","accessibility-first","cross-platform-ui","expressive-design"],"summary_rewrite":"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."},"files":[{"bytes":31358,"path":"skills/material-3/SKILL.md","sha256":"5bbd6a903bb3839561c496b6edac04dcdd414fe0669e4910a7dba44acdf0ee7f","url":"https://skillfed.io/files/hamen/material-3-skill/material-3/caf40925/SKILL.md"}],"id":"hamen/material-3-skill/material-3","links":{"html":"https://skillfed.io/hamen/material-3-skill/material-3","md":"https://skillfed.io/hamen/material-3-skill/material-3.md","repo":"https://github.com/hamen/material-3-skill"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":60,"language":"Shell","last_updated":"2026-07-15","license":"MIT","name":"material-3","publisher":"hamen","stars":1181},"relations":{"similar":[{"id":"aldefy/compose-skill/compose-expert"},{"id":"cometchat/cometchat-skills/cometchat-android-v6-compose-theming"},{"id":"yzlnew/infra-skills/material-you-slides"},{"id":"android/skills/display-glasses-with-jetpack-compose-glimmer"},{"id":"wshobson/agents/mobile-android-design"},{"id":"travisjneuman/.claude/android-development"},{"id":"fengshao1227/ccg-workflow/mobile"},{"id":"new-silvermoon/awesome-android-agent-skills/xml-to-compose-migration"},{"id":"olehsvyrydov/AI-development-team/native-mobile-developer"},{"id":"rodydavis/skills/create-flutter-app-native-ui"}]},"slug":{"owner":"hamen","repo":"material-3-skill","skill":"material-3"},"version":"caf40925"}