Is accessibility considered?

Absolutely. The skill mandates respecting user 'reduced motion' preferences using MotionConfig and accessibility-aware hooks.

Does this skill support the latest version of Framer Motion?

Yes, it includes support for the v11+ package rename to motion/react and v12 features like usePageInView and enhanced stagger options.

Can it handle complex layout changes?

Yes, it provides patterns for the FLIP technique using the layout and layoutId props for seamless shared element transitions.

How does this skill handle performance?

It strictly enforces the use of GPU-accelerated properties like transform and opacity while avoiding layout-triggering properties to maintain 60fps.

Motion Animation Patterns

Name: Motion Animation Patterns
Author: agents-inc

byagents-inc

0•

디자인 도구

Implements declarative, high-performance React animations using Motion patterns and accessibility best practices.

This skill provides specialized knowledge for building fluid, production-grade web animations using the Motion library (formerly Framer Motion). It enables Claude to implement orchestrated sequences through variants, complex exit transitions with AnimatePresence, and GPU-optimized interactions like hover, tap, and drag. By prioritizing accessibility and performance, it ensures animations are both smooth (60fps) and respectful of user preferences, making it an essential tool for developers building modern, high-quality React user interfaces.

주요 기능

01Scroll-linked and scroll-triggered animation patterns

020 GitHub stars

03Declarative motion components with physics-based spring animations

04Shared element transitions and automatic FLIP layout animations

05Orchestrated sequences using variants and stagger effects

06Built-in support for reduced motion accessibility preferences

사용 사례

01Developing complex landing page reveals and parallax scroll effects

02Creating interactive UI components like modals and tab indicators with fluid transitions

03Implementing gesture-driven interfaces with hover, tap, and drag functionality

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

주요 기능

01Scroll-linked and scroll-triggered animation patterns

020 GitHub stars

03Declarative motion components with physics-based spring animations

04Shared element transitions and automatic FLIP layout animations

05Orchestrated sequences using variants and stagger effects

06Built-in support for reduced motion accessibility preferences

사용 사례

01Developing complex landing page reveals and parallax scroll effects

02Creating interactive UI components like modals and tab indicators with fluid transitions

03Implementing gesture-driven interfaces with hover, tap, and drag functionality

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