What problem does it solve? Implementing Material Design 3 correctly requires knowing dozens of token rules — HCT tonal palettes, role-based color pairing, state-layer opacities, tonal elevation, and the 4dp grid — and getting any of them wrong breaks dark mode, dynamic color, and accessibility contrast. ## Core Features & Use Cases - Token-level MD3 reference: Covers the full --md-sys-* namespace across color, type, shape, motion, and spacing, with mappings to Jetpack Compose and Flutter. - Seed-to-scheme generation: Shows how to generate light, dark, and three contrast-level schemes from a single seed color using @material/material-color-utilities. - Per-component token tables: Provides canonical overrides for buttons, FABs, cards, text fields, dialogs, navigation, and more, plus hard rules that prevent common MD3 violations. - Use Case: A user asks to build a settings page in Material Design 3. The skill supplies the baseline light/dark token block, correct container/on-color pairings, state-layer CSS for interactive elements, and per-component shape and type tokens. ## Quick Start Build a Material Design 3 card and button layout using md-sys color, shape, and type tokens with proper state layers.
