Does it support accessibility features like reduced motion?

Yes, it includes best practices for using the MotionConfig component to automatically respect user OS settings for 'prefers-reduced-motion'.

Will this work with Cloudflare Workers?

Yes, the skill reflects the latest compatibility fixes that allow both 'motion' and 'framer-motion' packages to work directly with Cloudflare Wrangler as of late 2024.

Is this skill compatible with Next.js App Router?

Yes, the skill includes specific implementation patterns for using Motion within Client Components while effectively integrating them into Next.js Server Component architectures.

How does this skill help with performance?

It provides guidance on using LazyMotion and the useAnimate hook to reduce bundle sizes to as little as 2.3 KB while utilizing hardware-accelerated transforms.

Can I use this for mobile-friendly gestures?

Absolutely. Motion provides comprehensive support for drag, tap, and pan gestures that are cross-device compatible and optimized for touch interactions.

Motion React Animations

Name: Motion React Animations
Author: evolv3ai

byevolv3ai

0•

Design Tools

Creates fluid, production-ready React animations using the Motion library for high-performance web interfaces and interactions.

Motion (formerly Framer Motion) is the industry-standard React animation library for building sophisticated UI transitions with a declarative API. This skill equips Claude with the expertise to implement complex gestures, scroll-linked effects, hardware-accelerated layout transitions, and SVG path morphing while maintaining peak performance. It provides specific patterns for modern frameworks like Next.js 15 and Vite, ensuring developers can achieve polished, accessible animations with minimal bundle size impact through advanced techniques like LazyMotion and the useAnimate hook.

Key Features

01Gesture-based interactions including drag, hover, tap, and pan support

02Bundle optimization strategies using LazyMotion and useAnimate (2.3 KB - 34 KB)

03Built-in support for SVG path morphing and line drawing animations

040 GitHub stars

05Smooth FLIP-based layout transitions and shared element effects

06Hardware-accelerated scroll-linked and viewport-triggered animations

Use Cases

01Building interactive UI components like carousels, modals, and draggable Kanban boards

02Creating seamless layout shifts and route transitions in Next.js App Router applications

03Implementing parallax effects and scroll-triggered entrance animations for landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive motion

For use in Claude.ai and ChatGPT

Download Skill