What problem does it solve? Building UI components that conform to Material Design 3 requires knowing exact specifications for color tokens, shape, typography, elevation, and interaction states across dozens of components, which is tedious to look up and easy to get wrong. ## Core Features & Use Cases - Complete M3 Component Reference: Covers all six M3 categories — action, containment, communication, navigation, selection, and text input — with dimensions, variants, and CSS implementations using M3 design tokens. - M3 Expressive Coverage: Includes newer additions such as FAB menus, split buttons, button groups, and docked or floating toolbars, plus notes on deprecated patterns like segmented buttons. - Token and Accessibility Guidance: Ships a component-tokens reference for @material/web CSS custom properties, interaction state layer values, and an implementation checklist covering touch targets, contrast, and ARIA attributes. - Use Case: When building a settings screen, use this Skill to implement switches, list items, and a top app bar with correct M3 tokens, state layers, and 48dp touch targets instead of guessing values from the spec site. ## Quick Start Use the material-design-3-components skill to implement an M3-compliant filled button and outlined card with correct color tokens and interaction states.
