How does this skill handle animation performance?

The skill enforces the use of GPU-accelerated transform properties (x, y, scale, rotate) and strictly discourages animating layout-triggering properties like height, width, or margins.

Does this support the latest version of Framer Motion?

Yes, it specifically targets the motion/react package (v11 and v12+), including new features like usePageInView, enhanced stagger options, and updated drag controls.

Can I use this for complex shared element transitions?

Yes, the skill includes patterns for layoutId and LayoutGroup, enabling seamless transitions of elements across different components or containers.

What is the benefit of using this skill with Claude Code?

This skill provides Claude with specific patterns and best practices for the Motion library, ensuring generated animation code is performant, accessible, and follows modern React conventions like named constants for timing.

Is accessibility considered in these animation patterns?

Absolutely. A core requirement of this skill is respecting user reduced-motion preferences using MotionConfig or useReducedMotion hooks to ensure an inclusive user experience.

Motion Web Animations

Name: Motion Web Animations
Author: agents-inc

byagents-inc

0•

Herramientas de Diseño

Implements declarative, high-performance React animations using Motion patterns for fluid UI transitions and interactive gestures.

This skill empowers developers to integrate professional-grade animations into React applications using the Motion (formerly Framer Motion) library. It provides standardized patterns for component presence, complex layout transitions, gesture-based interactions, and scroll-linked effects while enforcing critical best practices like GPU acceleration and accessibility via reduced motion settings. By utilizing this skill, Claude can generate optimized animation code that handles everything from simple micro-interactions to complex shared-element transitions and multi-step sequences, ensuring a polished and performant user experience.

Características Principales

01Orchestrated animation sequences using reusable variants and stagger logic

02Built-in support for scroll-triggered reveal and continuous parallax effects

03GPU-optimized transform animations for smooth 60fps performance

04Declarative motion components with initial, animate, and exit prop patterns

05Automatic layout animations and shared element transitions via the FLIP technique

060 GitHub stars

Casos de Uso

01Implementing complex scroll-linked progress indicators and reveal patterns for marketing pages

02Building interactive, gesture-responsive UI elements like draggable cards or hover-reactive buttons

03Creating seamless page transitions and modal entry/exit animations with AnimatePresence

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

Download Skill