Motion (Framer Motion) Animations

Expert implementation of React animations using Motion, covering gestures, scroll effects, layout transitions, and performance optimization.

triggers:add animationsframer motionreact animationscroll effectslayout transitionsdrag and drop react

GitHub SKILL.md

What it does

This skill enables agents to build production-grade React animations. It covers everything from simple hover effects to complex shared-element transitions and high-performance scroll-linked animations using the Motion (formerly Framer Motion) library.

When to use it

Activate this skill for any frontend task requiring drag-and-drop interfaces, parallax hero sections, animated modals, or smooth layout morphing in React/Next.js applications.

What's included

Scripts: init-motion.sh for setup and optimize-bundle.sh for LazyMotion conversion.
References: Detailed guides on Performance Optimization, Next.js Integration, and Motion vs AutoAnimate.
Templates: 5 production-ready patterns including UI components and scroll-parallax setups.
Knowledge: Exhaustive list of 15+ common pitfalls and their verified solutions.

Compatible agents

Ideal for coding agents specialized in React, Next.js, and TypeScript (e.g., Cursor, Claude Code, Codex).

Not yet audited

This skill has not been reviewed by our automated audit pipeline yet.

Information

Repository: skills
Stars: 520

More from skills

Next.js — Next Best Practices

Opinionated collection of Next.js best practices covering file conventions, RSC boundaries, async patterns, metadata, image/font optimization, error handling an

Related Skills

Clerk Vue Patterns

Vue 3 integration patterns for Clerk: composables, router guards, and Pinia auth store integration.

OpenTestAI

Automated, high-confidence AI testing: bug detection, persona feedback, and prioritized test-case generation using many specialized tester profiles.

Manim Idea to Export

Turn plain-language concepts into production-ready ManimCE scene blueprints, runnable code, preview renders, and final export commands for video assets.

Go Data Structures

Authoritative guidance on choosing and using Go built-in and standard-library data structures, with practical best practices for slices, maps, arrays, container

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

Migrate from Next.js App Router to TanStack Start

Step-by-step migration checklist to move an App Router Next.js codebase to TanStack Start, covering routes, server functions, middleware, data fetching and buil

ClearShot — Screenshot UI Analysis

Structured UI screenshot analysis using a 5×5 spatial grid, full element inventory, and design system extraction. Escalates to full implementation blueprint whe

MCP App Store

Motion (Framer Motion) Animations

What it does

When to use it

What's included

Compatible agents