material-design_skill

Overview

This skill encodes Google Material Design principles into practical guidance and patterns for building modern, accessible user interfaces. It focuses on the material metaphor, deliberate motion, adaptive layouts, tonal color systems, and component anatomy so teams can deliver consistent cross-platform experiences. Use it to make interfaces that feel familiar, purposeful, and delightful.

How this skill works

The skill inspects design decisions and maps them to Material Design constructs: elevation and shadow for depth, typographic scale for hierarchy, motion tokens for animation timing, and tonal palettes for dynamic color schemes. It translates UI needs into concrete component variants, color roles, motion patterns, and accessibility checks developers can apply. Outputs include recommended tokens, component anatomy, and implementation notes for light and dark schemes.

When to use it

• Building a new cross-platform UI that needs a consistent visual language
• Refactoring an interface to improve clarity, accessibility, or motion choreography
• Creating brand-aware themes using dynamic color from imagery or brand tokens
• Designing components (buttons, cards, sheets) with clear anatomy and states
• Specifying motion and transition patterns for product interactions

Best practices

• Treat surfaces as physical material: use elevation and shadows to communicate hierarchy
• Follow the typographic scale for clear information hierarchy and responsive scaling
• Use motion sparingly and meaningfully: prefer short, standard durations for micro-interactions
• Generate tonal palettes from a single source color for consistent light/dark schemes
• Prefer semantic color roles (primary, onPrimary, surface, outline) over hard-coded hex values
• Test contrast, focus states, and reduced-motion preferences for accessibility

Example use cases

• Designing a responsive app bar, cards, and FAB with correct elevation and shadow levels
• Implementing Material 3 dynamic color: extract a source color and generate light/dark schemes
• Choosing button variants (filled, tonal, elevated, outlined, text) for different emphasis levels
• Defining motion system tokens and applying them to transitions, container transforms, and fades
• Creating a component library with consistent anatomy, states, and accessibility behavior