framer-motion-animator Skill (patricio0312rev) for Claude Code: What It Does and How to Install It

Makes Claude add Framer Motion animations to your React app, from fades and gestures to page transitions and scroll effects.

Installs: 11.2K; on skills.sh
Stars: 63; on GitHub
Updated: Jan 2026; last repo commit

This skill makes Claude write Framer Motion code for your React project. SKILL.md walks through a six-step workflow: identify the animation need, choose the type, define motion values, add transitions, orchestrate sequences and optimize performance. It ships ready-to-adapt TSX for fades, hover and tap effects, exit animations, staggered lists, drag and swipe, scroll-triggered effects and Next.js App Router page transitions.

It triggers on requests such as "add animation", "framer motion", "page transition", "animate component" or "micro-interactions". It is a text skill with one file and no scripts, written by Patricio Marroquin, not by the Framer Motion team. SKILL.md shows npm install framer-motion as the first setup step.

Good for

React and Next.js developers adding animation to components
Front-end developers who want page transitions, drag gestures and scroll effects
Teams that need reduced-motion support in their animations

Install framer-motion-animator

Claude Code

Copy this prompt.

Install the framer-motion-animator skill in Claude Code. Run this command:

npx skills add https://github.com/patricio0312rev/skills --skill framer-motion-animator

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".

Sections in SKILL.md

Core Workflow
Installation
Basic Animations
Simple Animation
Exit Animations with AnimatePresence
Variants Pattern
Staggered Children
Interactive Variants
Page Transitions
Next.js App Router
Shared Layout Animations
Gesture Animations
Drag
Swipe to Dismiss
Scroll Animations
Scroll-Triggered

Key facts

Author: Patricio Marroquin (repo owner patricio0312rev; not the Framer Motion team)
License: MIT (LICENSE file and README)
Installs on skills.sh: 11,247 (Nov 2, 2026)
GitHub stars: 63 for the whole patricio0312rev/skills repo (Nov 2, 2026)
Last repo commit: Jan 12, 2026
Audits on skills.sh: Gen Agent Trust Hub: pass, Socket: pass, Snyk: pass
What it includes: 1 file: SKILL.md (no scripts)
Part of: The patricio0312rev/skills repo: 155 skill folders in the tree, in 10 categories

What it includes

Six steps: need, type, motion values, transitions, sequencing, performance
The animation types it names are simple, variants, gestures and layout.
Read · Core workflow
SKILL.md shows npm install framer-motion as the setup step
Runs code · Install the library
Fade-in on mount, scale on hover and tap, and exit animations with AnimatePresence
The exit example is an animated modal with a backdrop.
Try: “Add a fade-in and a hover scale to this card component”
Write · Basic animations
Staggered child lists and interactive button states
The stagger example uses staggerChildren 0.1 and delayChildren 0.2.
Write · Variants
A Next.js App Router app/template.tsx, plus shared layout animations with layoutId
The shared layout example is an animated tab indicator inside LayoutGroup.
Write · Page transitions
Draggable cards with constraints, and swipe-to-dismiss
Write · Gestures
Fade in when visible with useInView, parallax and a progress bar with useScroll
Write · Scroll animations
useAnimate for step-by-step sequences, and useMotionValue with useTransform
Write · Animation hooks
An AnimatedContainer with 6 presets and a staggered AnimatedList
The presets are fadeIn, fadeInUp, fadeInDown, scaleIn, slideInLeft and slideInRight.
Write · Reusable components
Five shared presets: spring, springBouncy, springStiff, smooth and snappy
Write · Transition presets
Uses the useReducedMotion hook to tone down movement
Write · Reduced motion
8 best practices and an 8-item output checklist for every animation
Read · Best practices and checklist

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your components and adds a dependency
The skill makes Claude write animation code and install framer-motion. Review the diff and the package change, and check reduced-motion behaviour yourself. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	SKILL.md defines no read-only mode.
Sign-in and keys	SKILL.md names no credentials.
Scopes	Edits React component files in your project May run npm install framer-motion in your project

Questions

What does the framer-motion-animator skill do?

It makes Claude write Framer Motion animations for React. That covers entrance and exit effects, hover and tap feedback, staggered lists, drag and swipe, scroll effects, page transitions and reduced-motion support.

How do I install it?

Use the install box at the top of this page. The skill is one SKILL.md file with no scripts, so the Claude app upload route works as well as the Claude Code and Codex folder routes. The skills CLI route is in the same box.

Does it install Framer Motion for me?

SKILL.md shows npm install framer-motion in its Installation section, and its code imports from framer-motion. The skill itself is instructions, so the install happens when Claude runs that command in your project and you approve it.

Does it only work with Next.js?

No. Only the page transition example is written for the Next.js App Router, as app/template.tsx. The other examples are plain React components.

Is it made by Framer or the Framer Motion team?

No. The repo belongs to Patricio Marroquin (patricio0312rev). The skill teaches Claude to use the Framer Motion library but is not a Framer product.

Is it safe?

It bundles no scripts, but it makes Claude edit your React code and install an npm package, so review the diff. Our advice: try it on one component and check the result in a browser before applying it app-wide.

How is it different from animation-micro-interaction-pack?

The same repo has animation-micro-interaction-pack, a shorter file that lists animation patterns, Tailwind animation settings and one Framer Motion example. framer-motion-animator is longer and is built around Framer Motion code.

Does it check animation performance?

It lists GPU-friendly properties and a checklist item to test on low-end devices. The skill has no scripts, so any testing is something you or Claude do separately.

Information

updated Nov 2, 2026

Repository: patricio0312rev/skills
Folder: frontend/framer-motion-animator

patricio0312rev/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

framer-motion-animator SKILL.md · github.com
patricio0312rev/skills README · github.com
animation-micro-interaction-pack SKILL.md · github.com