Can I use it for loading states?

Absolutely. It includes best-practice patterns for skeleton screens, custom SVG spinners, and staggered loading animations for lists.

Does it support Framer Motion?

Yes, the skill provides implementation patterns for both native Tailwind CSS transitions and advanced Framer Motion sequences for more complex orchestrations.

Is accessibility considered for animations?

Yes, the skill follows a philosophy that respects 'prefers-reduced-motion' media queries to ensure accessible experiences for all users.

What is the recommended timing for UI transitions?

The skill suggests keeping quick feedback transitions under 150-200ms and complex sequences under 500ms to maintain a fast, snappy interface feel.

How does this skill handle animation performance?

The skill prioritizes GPU-accelerated properties like transform and opacity while avoiding layout-triggering properties like width, height, or top.

Motion Design Assistant

Name: Motion Design Assistant
Author: Expanly

byExpanly

0•

Design Tools

Enhances React interfaces with performance-optimized micro-interactions, animations, and transitions using Tailwind CSS and Framer Motion.

The Motion Design skill transforms Claude into a specialized UI animator, providing standardized patterns for React-based transitions and micro-interactions. It focuses on the technical implementation of Tailwind CSS utilities and Framer Motion to create fast, subtle, and purposeful motion that communicates interface state changes effectively. By adhering to performance best practices—such as GPU acceleration and respect for 'prefers-reduced-motion'—the skill ensures that animations enhance usability without distracting the user or degrading interface performance.

Key Features

01Implements high-performance transitions using Tailwind CSS utility classes.

020 GitHub stars

03Provides patterns for staggered entrance animations and complex Framer Motion sequences.

04Ensures performance by focusing on GPU-accelerated properties like transform and opacity.

05Optimizes visual feedback with custom loading spinners and skeleton states.

06Includes built-in support for accessibility and reduced motion preferences.

Use Cases

01Adding polished hover and active states to navigation elements and buttons.

02Creating seamless entrance animations for dashboard cards and list items.

03Implementing responsive loading feedback for asynchronous data fetching.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expanly/expanly-claude-code-agents motion-design

For use in Claude.ai and ChatGPT

Key Features

01Implements high-performance transitions using Tailwind CSS utility classes.

020 GitHub stars

03Provides patterns for staggered entrance animations and complex Framer Motion sequences.

04Ensures performance by focusing on GPU-accelerated properties like transform and opacity.

05Optimizes visual feedback with custom loading spinners and skeleton states.

06Includes built-in support for accessibility and reduced motion preferences.

Use Cases

01Adding polished hover and active states to navigation elements and buttons.

02Creating seamless entrance animations for dashboard cards and list items.

03Implementing responsive loading feedback for asynchronous data fetching.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expanly/expanly-claude-code-agents motion-design

For use in Claude.ai and ChatGPT