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

Herramientas de Diseño

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

Acerca de

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.

Características Principales

Implements high-performance transitions using Tailwind CSS utility classes.
0 GitHub stars
Provides patterns for staggered entrance animations and complex Framer Motion sequences.
Ensures performance by focusing on GPU-accelerated properties like transform and opacity.
Optimizes visual feedback with custom loading spinners and skeleton states.
Includes built-in support for accessibility and reduced motion preferences.

Casos de Uso

Adding polished hover and active states to navigation elements and buttons.
Creating seamless entrance animations for dashboard cards and list items.
Implementing 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

Download Skill

GitHub