How does this skill handle animation performance?

It strictly enforces the use of GPU-accelerated properties such as transforms (x, y, scale, rotate) and opacity to ensure smooth 60fps performance.

Does it support scroll-linked effects?

Yes, it covers useScroll, useTransform, and whileInView patterns for creating both scroll-triggered reveals and continuous parallax effects.

Is accessibility considered for these animations?

Absolutely. The skill prioritizes user preferences for reduced motion by integrating MotionConfig and the useReducedMotion hook into its patterns.

Can I use this for complex exit animations?

Yes, it provides specific implementation patterns for AnimatePresence to correctly handle components as they are removed from the React tree.

Does this skill support the latest Framer Motion versions?

Yes, it includes support for v11 and v12 features, including the motion/react package renaming and the usePageInView hook.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: agents-inc

byagents-inc

•

设计工具

Implements production-grade, declarative React animations using Framer Motion with a focus on performance and accessibility.

This skill equips Claude with specialized patterns for the Motion library (formerly Framer Motion), enabling the creation of fluid, physics-based animations in React applications. It provides standardized implementations for motion components, orchestrated sequences via variants, exit animations through AnimatePresence, and advanced layout transitions using the FLIP technique. By enforcing best practices such as GPU-accelerated transforms and mandatory reduced-motion support, this skill ensures Claude generates high-performance UI interactions that are both visually polished and inclusive of all user preferences.

主要功能

01Built-in support for scroll-triggered reveals and parallax effects

02Declarative animation patterns for component entry, exit, and presence

03Hardware-accelerated layout transitions and shared element animations

041 GitHub stars

05Complex orchestration using nested variants and staggered timing

06Interactive gesture handling for hover, tap, focus, and drag states

使用场景

01Building interactive UI components with smooth micro-interactions and feedback

02Implementing complex page transitions and shared element animations between views

03Creating accessible, scroll-driven storytelling experiences and reveal animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-animation-framer-motion

For use in Claude.ai and ChatGPT

主要功能

01Built-in support for scroll-triggered reveals and parallax effects

02Declarative animation patterns for component entry, exit, and presence

03Hardware-accelerated layout transitions and shared element animations

041 GitHub stars

05Complex orchestration using nested variants and staggered timing

06Interactive gesture handling for hover, tap, focus, and drag states

使用场景

01Building interactive UI components with smooth micro-interactions and feedback

02Implementing complex page transitions and shared element animations between views

03Creating accessible, scroll-driven storytelling experiences and reveal animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-animation-framer-motion

For use in Claude.ai and ChatGPT