Motion Framer

If you're building React apps with animations beyond basic CSS transitions, this handles everything from button hover states to complex page transitions. You get motion components that wrap regular HTML elements, gesture recognition for hover/tap/drag interactions, physics-based spring animations, and AnimatePresence for smooth exit animations. The variants system is especially clean for coordinating animations across parent and child components with staggered timing. It works with Next.js, Vite, and other modern frameworks. The declarative API means you're describing what should animate rather than orchestrating timeline details, which keeps animation code maintainable as your UI gets more interactive.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 5
skills.sh installs: 6.5K
GitHub stars: 1.3K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add freshtechbro/claudedesignskills --skill motion-framer --agent claude-code

Installs into .claude/skills of the current project.

Files

Motion & Framer Motion

Overview

Motion (formerly Framer Motion) is a production-ready animation library for React and JavaScript that enables declarative, performant animations with minimal code. It provides motion components that wrap HTML elements with animation superpowers, supports gesture recognition (hover, tap, drag, focus), and includes advanced features like layout animations, exit animations, and spring physics.

When to use this skill: