What animation library does this skill support?

This skill is specifically optimized for Framer Motion, the leading animation library for React-based web and mobile development.

Can I use this for page transitions?

Yes, the skill includes exit animation patterns using AnimatePresence and specific timing references (300-500ms) for smooth page transitions.

Are these animations performant?

The patterns utilize Framer Motion's hardware-accelerated transitions and declarative syntax to ensure high frame rates and minimal main-thread impact.

Does it include guidelines for animation speeds?

Yes, it provides a curated timing reference table for micro-interactions, UI feedback, panels, and full-page transitions to ensure UX consistency.

How does it handle complex list animations?

It provides a List Stagger pattern using Framer Motion variants, allowing you to animate multiple children elements with a single parent trigger.

Motion & Animations

Name: Motion & Animations
Author: afettah

byafettah

0•

设计工具

Implements professional animation patterns and UI transitions using the Framer Motion library for React applications.

This skill equips Claude with specialized patterns and best practices for creating fluid, high-performance animations using Framer Motion. It provides standardized code snippets for common UI interactions such as fading modals, sliding panels, and staggered list entrances. Beyond just code, the skill includes professional timing references to ensure animations feel responsive and polished, ranging from micro-interactions to complex page transitions. It is an essential tool for frontend developers looking to enhance user experience with consistent and accessible motion design.

主要功能

010 GitHub stars

02Ready-to-use patterns for fade, scale, and slide animations

03Automated staggered animation logic for dynamic lists and grids

04Standardized duration guidelines for different UI interaction types

05Declarative animation variant configurations for cleaner code

06Seamless exit animation handling using AnimatePresence

使用场景

01Building polished modal and drawer transitions for web dashboards

02Implementing micro-interactions for hover and focus states with consistent timing

03Enhancing data-heavy lists with staggered entrance effects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add afettah/git-coupling-analyzer motion

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Ready-to-use patterns for fade, scale, and slide animations

03Automated staggered animation logic for dynamic lists and grids

04Standardized duration guidelines for different UI interaction types

05Declarative animation variant configurations for cleaner code

06Seamless exit animation handling using AnimatePresence

使用场景

01Building polished modal and drawer transitions for web dashboards

02Implementing micro-interactions for hover and focus states with consistent timing

03Enhancing data-heavy lists with staggered entrance effects

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add afettah/git-coupling-analyzer motion

For use in Claude.ai and ChatGPT