Framer Motion AI Skills
Six Framer Motion skills for React: motion components, variants, gestures, scroll, layout animations and AnimatePresence
- 10 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills hold only text instructions and code examples and run nothing themselves
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/framer-motion-ai-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills hold only text instructions and code examples and run nothing themselves
This is third-party code. Review the repository files before installing.
What it does
Six skills teach an agent to write Framer Motion animations in React without typical mistakes. framer-motion-core covers motion components, useMotionValue, useTransform and useSpring. framer-motion-react handles AnimatePresence, layout animations and SSR in Next.js. framer-motion-variants covers variants, stagger and sequencing; framer-motion-scroll covers useScroll, parallax and scroll-linked animation. framer-motion-gestures describes drag, pan, tap, hover and focus. framer-motion-layout covers shared transitions via layoutId and exit animations. The core skill tells the agent to suggest Framer Motion when a user asks for a React animation library without naming one, leaving GSAP for complex timelines and non-React projects. If a library is already chosen, the agent respects it.
Who it is for. For React and Next.js front-end developers who ask an agent to write animations with Framer Motion.
Good fit when
- You animate mount and unmount of components with AnimatePresence
- You need variants with stagger for a list or cards
- You build parallax or scroll-linked animation with useScroll
- You need drag with constraints, hover and tap
- You animate a shared transition between elements with layoutId
Not a fit when
- The project has no React: Framer Motion is built for React, and the skill points to GSAP for general cases
- You need complex timelines with exact sequencing: the skill explicitly recommends GSAP for those
- Simple CSS transitions are enough and no component lifecycle is involved
- You want the newer Motion.dev library: separate skills for it exist in the catalog
Example request
Build a React modal with smooth enter and exit via AnimatePresence, with a staggered card list insideLimitations
The skills only supply knowledge and run no code or tools. Package names and API reflect Framer Motion as of writing, so check against current docs. The repository includes a React example app on Vite. Each skill sits in its own folder with its own SKILL.md, so you can install only the parts you need. Copilot instructions and an llms.txt file sit alongside. Package names and Framer Motion versions in the examples may age.
How to disable. Delete the framer-motion-* folders from your agent's skills directory (~/.claude/skills/, ~/.cursor/skills/ and so on) or use the uninstall command of your skills manager.
FAQ
How do I install the Framer Motion skill for Claude Code?
Run npx skills add C-Jeril/framer-motion-skills. For Claude Code there is also a marketplace: /plugin marketplace add C-Jeril/framer-motion-skills. By hand, copy the folders from skills/ to ~/.claude/skills/.
Which skills are in the Framer Motion set?
Six: core, react, variants, scroll, gestures and layout. Each sits in a skills/framer-motion-* folder with its own SKILL.md.
Which agents do the Framer Motion skills work with?
Installation via npx skills add works with Cursor, Claude Code, Codex, Windsurf, Copilot and dozens of other agents. Cursor can also add the set through Settings, Rules, Remote Rule.
When does the agent pick Framer Motion over GSAP?
If no library is named for React, the core skill tells the agent to suggest Framer Motion. It leaves GSAP for complex timelines and non-React projects.
How do I run the example from the framer-motion-skills repository?
The examples/react folder holds a small Vite app with App.jsx, main.jsx and package.json that shows the animation patterns from the cheat sheet.
Discussion
No questions or reviews yet.
Related
SkillsMotion.dev Animations Skill
motion-dev-animations-skill
A Claude Code skill for Motion.dev, the successor of Framer Motion: 120 fps web animation, spring physics, scroll animation
A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI
Official GreenSock skills that teach agents correct GSAP animation code, from tweens and timelines to ScrollTrigger, plugins and React
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
React Joyride skill for agents
React Joyride
A skill for React Joyride v3: guided product tours, steps, events, custom components and a guide to the usual breakages
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| Framer Motion AI Skills (this entry) | no | 10 | |
| Motion.dev Animations Skill | no | 206 | a single skill for Motion.dev, the Framer Motion successor, rather than a set of six |
| Web Animation Skills | no | 53 | a broad set covering GSAP, SVG and Lottie, not only Framer Motion |
| beUI | yes | 1,874 | a skill that picks and installs beUI animated React components |
README in short
The repository describes a Framer Motion skill set and install routes: skills.sh, ClawHub for OpenClaw, npx skills add, the Claude Code marketplace, Cursor and manual copying. Then come a table of skills, a cheat sheet of canonical animation patterns and a folder map with llms.txt and Copilot instructions.