motion-design-patterns

Automate Motion-based UI animation patterns in React interfaces.

178|10|Updated Feb 5, 2026

Search Tags:#react #micro-interactions #framer-motion #page-transitions #ui-animation #motion-patterns #layout-animations

Ready to run

npx skills add https://github.com/dylanfeltus/skills --skill motion-design-patterns

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-design-patterns
Source: https://github.com/dylanfeltus/skills/tree/main/motion-design-patterns
Command: npx skills add https://github.com/dylanfeltus/skills --skill motion-design-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Framer Motion-based animation patterns let UI teams quickly add purposeful, polished motion to React interfaces, reducing custom implementation time and ensuring consistent feel across components.

Core Features & Use Cases

Ready-to-use patterns for entrance, exit, hover, scroll, and page-transition animations.
Guidelines on spring configurations, anti-patterns, and best practices to keep motion consistent and performant.
Real-world examples and reference patterns for cards, lists, modals, navigation, and dashboards.

Quick Start

Copy the motion-design-patterns folder into your agent's skills directory and start integrating the provided patterns into React components for polished UI motion.

Frequently Asked Questions about motion-design-patterns

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

FAQPage Schema

How do I add consistent Framer Motion animations to my React components?▼

Apply reusable Framer Motion animation patterns to React components for consistent UI motion. This provides ready-to-use entrance, exit, hover, and scroll transitions with predefined spring configurations to ensure polished, performant micro-interactions.

What are the best practices for Framer Motion page transitions in React?▼

Best practices for Framer Motion page transitions include using recommended spring configurations, avoiding defined anti-patterns, and applying consistent layout animations. This ensures performant motion across React dashboards and navigation without jank.

Can I use these motion patterns for both dashboard and page-level UI animations?▼

Yes, these motion patterns apply to both dashboard and page-level React interfaces. They provide reference patterns for cards, lists, modals, and navigation, covering entrance, exit, hover, and scroll transitions across various UI components.

Do I need to manually configure springs for every Framer Motion micro-interaction?▼

No, you do not need to manually configure springs for every micro-interaction. This defines recommended spring configurations and best practices upfront, automating the application of consistent motion patterns across your React components.

Why do my custom React UI animations feel inconsistent across different components?▼

Custom React UI animations feel inconsistent without standardized motion patterns. Applying predefined Framer Motion patterns for entrances, exits, and hover states ensures a unified feel and reduces the custom implementation time required for each component.

What are the limitations of using predefined motion patterns for React layout animations?▼

Predefined motion patterns are designed for standard Framer Motion use cases like entrances, exits, and layout animations. Following the provided anti-patterns and best practices ensures performance, but highly complex or custom physics-based interactions may still require manual tuning.