skills.rest
dtsong
dtsongCOMMUNITY
Explore all skills by this author →
GitHub

Motion Design

Design motion language specifying transition principles, micro-interactions, and reduced-motion alternatives in Markdown.

1|1|Updated Feb 21, 2026
Search Tags:#accessibility#animation#transitions#micro-interactions#motion design#reduced motion
One-click install
npx skills add https://github.com/dtsong/claude-code-windows-setup --skill motion-design-dtsong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Motion Design
Source: https://github.com/dtsong/claude-code-windows-setup/tree/main/skills/council/artisan/motion-design
Command: npx skills add https://github.com/dtsong/claude-code-windows-setup --skill motion-design-dtsong

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps design the motion language for a feature or system, ensuring animations are purposeful, performant, and accessible.

Core Features & Use Cases

  • Define Motion Principles: Establish project-wide standards for duration, easing, and distance.
  • Spec Animations: Detail individual animations, including properties, duration, and easing.
  • Reduced-Motion Support: Design accessible alternatives for users who prefer less motion.
  • Use Case: When designing a new onboarding flow, use this Skill to define the animation principles for screen transitions and micro-interactions, ensuring a smooth and accessible user experience.

Quick Start

Define the motion principles for a new feature, including duration scales and easing curves.

Frequently Asked Questions about Motion Design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design micro-interactions and transitions that are accessible?▼

To design accessible motion, define animation choreography and transition principles, then specify reduced-motion alternatives for users who prefer less movement, outputting the complete specifications in Markdown format.

What is the best way to document animation easing curves and duration scales?▼

Documenting animation easing curves and duration scales involves establishing project-wide motion language standards. This process details individual animation properties and outputs comprehensive Markdown specifications for development handoff.

How do I create reduced-motion alternatives for UI animations?▼

Creating reduced-motion alternatives involves designing accessible substitutions for standard UI animations. This addresses accessibility requirements by ensuring users preferring less motion experience functional, non-animated state changes.

Can I use this to spec animation choreography for an onboarding flow?▼

Yes, you can spec animation choreography for an onboarding flow by defining screen transition principles and micro-interaction details. This ensures smooth, accessible user experiences across the entire flow.

What are the limitations of designing motion language without considering performance?▼

Designing motion language without considering performance leads to janky animations and poor user experience. Addressing performance considerations during motion specification ensures animations remain fluid and do not degrade interface responsiveness.

Related Skills

Explore More Design & Creative Skills→
gyalamanch001agyalamanch001a

framer-motion

Implement Disney animation principles in React interfaces with Framer Motion.

Community
Intermediate
Objective-ArtsObjective-Arts

motion

Define motion design rules for digital interfaces using physical metaphors and choreography.

Official
Intermediate
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
fgarofalo56fgarofalo56
6

animation-motion

Creates UI animations with motion using Tailwind's built-in color palette.

Community
Intermediate