Agent skill · software engineering · aiskillstore
framer-motion
Comprehensive Framer Motion animation library for React. Covers motion components, variants, gestures, page transitions, and scroll animations. Use when adding animations to React/Next.js applications.
Why this skill is useful
Provides specific patterns and templates for implementing animations in React applications using Framer Motion that the AI wouldn't reliably generate on its own.
What it needs
Requires framer-motion installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Framer Motion Skill Production-ready animations for React applications. Quick Start Installation Basic Usage Core Concepts Concept Guide --------- ------- Motion Component reference/motion-component.md Variants reference/variants.md Gestures reference/gestures.md Hooks reference/hooks.md Examples Pattern Guide --------- ------- Page Transitions examples/page-transitions.md List Animations examples/list-animations.md Scroll Animations examples/scroll-animations.md Micro-interactions examples/micro-interactions.md Templates Template Purpose ---------- --------- templates/page-transition.tsx Page transition wrapper templates/animated-list.tsx Animated list component Quick Reference Basic Animation Hover & Tap Variants AnimatePresence (Exit Animations) Scroll Trigger Drag Layout Animation Transition Types Easing Functions Reduced Motion Always respect user preferences: Common Patterns Fade In Up Staggered List Modal Accordion Best Practices 1. Use variants: Cleaner code, easier orchestration 2. Respect reduced motion: Always check useReducedMotion 3. Use layout sparingly: Can be expensive, use only when needed 4. Exit animations: Wrap with AnimatePresence 5. Spring for interactions: More natural feel for hover/tap 6. Tween for page transitions: More predictable timing 7. GPU-accelerated properties: Prefer opacity, scale, x, y over width, height
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/framer-motion