AgentSkillsCN

material-design-3-expressive

应用Material Design 3的表现性设计原则、动画和组件模式。在设计UI、实现微交互、色彩系统或基于弹簧的动画时使用。

SKILL.md
--- frontmatter
name: material-design-3-expressive
description: Apply Material Design 3 Expressive design principles, animations, and component patterns. Use when designing UI, implementing micro-interactions, color systems, or spring-based animations.

Material Design 3 Expressive

Design guide for Material Design 3 Expressive principles with TailwindCSS integration.

When to Use This Skill

  • •UI/UX design and planning
  • •Implementing micro-interactions
  • •Designing color systems (Dynamic Color)
  • •Implementing animations and transitions
  • •Ensuring accessibility compliance

When NOT to use:

  • •Backend logic implementation → angular-v21-development
  • •Page routing configuration → analogjs-development
  • •Basic styling only → tailwindcss-v4-styling

Core Principles

  • •Expressiveness: Fluid, spring-based animations that feel natural
  • •Personalization: UI that reflects user personality and preferences
  • •Context Awareness: Adaptive UI that responds to context and usage
  • •Accessibility: WCAG AA compliance, clear focus indicators, sufficient contrast
  • •Design Characteristics:
    • •Rounded corners for friendly appearance
    • •Subtle shadows and elevation
    • •Spring-based motion for organic feel
    • •Clear focus states for keyboard navigation

Implementation Guidelines

Color System

Material Design 3 Expressive color patterns:

  1. •Define semantic color roles (primary, surface, on-primary, etc.)
  2. •Use oklch() color space for better manipulation
  3. •Implement Dynamic Color for personalization
  4. •Ensure WCAG AA contrast ratios

→ Details: Design Tokens

Component Styling

Component design patterns:

  1. •Use generous padding and rounded corners
  2. •Apply subtle shadows for elevation
  3. •Implement smooth hover/focus transitions
  4. •Use consistent spacing scale

→ Details: Design Tokens

Animation and Motion

Motion design patterns:

  1. •Use spring-based easing for natural feel
  2. •Keep animations under 400ms for responsiveness
  3. •Use transform properties for performance
  4. •Implement enter/exit animations

→ Details: Design Tokens

Accessibility

Accessibility requirements:

  1. •Minimum 4.5:1 contrast ratio for text
  2. •Visible focus indicators with offset
  3. •Support for reduced motion preference
  4. •Semantic HTML and ARIA attributes

→ Details: Design Tokens

Typography

Typography patterns:

  1. •Use clear hierarchy with size and weight
  2. •Maintain readable line lengths (45-75 characters)
  3. •Use appropriate line-height for readability
  4. •Consider responsive typography

→ Details: Design Tokens

Workflow

  1. •Design Analysis: Review UX goals and user needs
  2. •Color Definition: Define semantic color roles
  3. •Component Design: Apply M3E patterns to components
  4. •Motion Design: Add animations and transitions
  5. •Accessibility Audit: Verify WCAG AA compliance
  6. •Responsive Testing: Test across breakpoints

Related Skills

  • •tailwindcss-v4-styling: For implementing styles
  • •angular-v21-development: For component implementation
  • •analogjs-development: For page application

Reference Documentation

For detailed patterns and code examples, see: