Implements Material Design 3 UIs with Jetpack Compose, Flutter, and web components.
npx skills add https://github.com/DCueto/zen-track --skill material-3-dcueto
Please help me install this Agent Skill. Skill: material-3 Source: https://github.com/DCueto/zen-track/tree/main/ZenTrackApp/.agents/skills/material-3 Command: npx skills add https://github.com/DCueto/zen-track --skill material-3-dcueto
md.sys token system (color, typography, shape, elevation, motion) and 30+ components with Compose and @material/web mappings. - Adaptive layout patterns: Provides canonical layouts (feed, list-detail, supporting pane), window size classes, foldable posture handling, and responsive navigation patterns. - MD3 compliance audit: Scores an app or page across 10 categories (color, typography, shape, accessibility, etc.) and produces a prioritized fix report. - Use Case: Ask for a responsive app shell with a navigation rail on tablets and bottom bar on phones, and receive spec-correct Compose or web code using proper tokens. ## Quick Start Use the material-3 skill to build a Jetpack Compose settings screen with dynamic color and a navigation bar.High-intent search queries and answers about installing and using this skill.
Use androidx.compose.material3 with MaterialTheme, supplying a colorScheme from dynamicLightColorScheme or dynamicDarkColorScheme on Android 12+, or static lightColorScheme and darkColorScheme otherwise. Then use M3 composables like Scaffold, Button, and NavigationBar.
Set useMaterial3: true in ThemeData and generate a scheme with ColorScheme.fromSeed(seedColor: ...). This activates MD3 components, dynamic color support, and the MD3 type scale in your MaterialApp.
No. Material Web Components are in maintenance mode and M3 Expressive is not implemented on the web. Use CSS custom properties with md.sys tokens and easing/duration values as a fallback for motion instead of spring physics.
MD3 replaces elevation shadows with tonal surface colors, generates full color schemes from a single seed color, uses fully rounded corners by default, and adds spring-based motion plus three user-controlled contrast levels. MD2 and MD3 libraries should never be mixed.
Use window size classes (Compact under 600dp, Medium 600-839dp, Expanded 840dp+) to switch navigation between bottom bar, rail, and drawer, and apply canonical layouts like list-detail. On foldables, avoid placing interactive content across the hinge.
Hardcoded hex values break dynamic theming, dark mode, and contrast adjustment. Always use semantic tokens like var(--md-sys-color-primary) on web or MaterialTheme.colorScheme roles in Compose, paired with their intended on-color counterparts.
cuongtl1992Parse Lean PRD Screen States into a single navigable HTML wireframe.
hatch3rValidate UI/UX with axe-core, Playwright, and accessibility-tree snapshots.
chmonya-incApplies Material Design 3 UX principles to design and audit Android Compose screens.
nexu-ioIntegrate Apple Human Interface Guidelines into design workflows for multi-platform application development.