Skills
.Work. You
Rest

material-design-3-motion

Community

Craft fluid, engaging M3 motion experiences.

Design & Creative#animation#transitions#micro-interactions#motion#m3#haptics#material design 3
Authorshelbeely
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps developers implement Material Design 3's expressive and natural motion principles, ensuring animations are intuitive, delightful, and performant.

Core Features & Use Cases

  • Expressive Motion: Apply physics-based spring animations for natural, lively interactions.
  • Animation Types: Implement transitions, micro-interactions (hover, focus, press), and complex animations like stagger and morphing.
  • Use Case: When building a new UI component, use this Skill to apply a spring-based animation to its press state, making it feel responsive and engaging to the user.

Quick Start

Apply a standard Material Design 3 fade-in animation to the element.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: material-design-3-motion
Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#material-design-3-motion

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.