What is the motion-framer skill?
The motion-framer skill is part of freshtechbro's design skillstack. It gives an AI agent working patterns for Motion, formerly Framer Motion: motion components, variants, hover, tap and drag gestures, AnimatePresence, layout animations, springs and scroll triggers, plus a generator script and a Vite starter.
Motion, formerly Framer Motion, turns animation into a prop on HTML and SVG elements. The motion-framer skill teaches an agent that API, targeting Motion v11 or later with React 18 or later, TypeScript, and Vue also noted as supported.
Its trigger list is practical: interactive buttons, cards and menus, micro-interactions, page transitions, scroll and parallax effects, drag-and-drop interfaces, shared element transitions and replacing CSS transitions with animation you can control.
Core ideas the skill teaches
- Motion components: prefix an element with motion. and give it animate, initial and transition props.
- Three transition types: tween by default, spring for physics and inertia for drag.
- Variants with propagation, so children inherit parent states and staggerChildren sequences them.
- Gesture props for hover, tap, focus, drag and in-view states.
Patterns covered
- Drag with axis locks, constraints, elasticity and visual feedback while dragging.
- Exit animations through AnimatePresence, which needs a direct child with a unique key.
- Layout animations, plus layoutId for tab underlines and thumbnail to modal transitions.
- Viewport reveals with once, amount and margin options.
- Spring presets: Gentle at stiffness 100 and damping 20, Wobbly at 200 and 10, Stiff at 400 and 30, Slow at 50 and 20.
What sits in the skill folder
Beyond SKILL.md there is references/api_reference.md and two scripts, animation_generator.py and variant_builder.py. The README says the first generates 11 animation types. A starter_motion project adds DraggableBox, HoverCard and StaggerList components.
Who the motion-framer skill is for
Best for
- React and Next.js interfaces that need hover, tap, drag and list animations without hand-rolled state.
- Layout changes such as reordering, resizing or opening a card into a modal.
- Pairing with scroll engines. See gsap-framer-scroll-animation and gsap-scrolltrigger.
Not for
- Teams standardized on another animation library, since the README lists GSAP and React Spring as alternatives.
- Judging how an animated page actually renders. For that check, see frontend-visual-qa.
Use it with UiChemy
Motion code lives in React apps, so it does not drop straight into a WordPress page. If an AI agent builds the interface, UiChemy AI to WordPress can import that build, and Composer then edits the HTML, CSS and JS. Get Started there.
How to install Motion Framer Skill: Animate React Interfaces
/plugin marketplace add freshtechbro/claudedesignskillsAdd the marketplace
In Claude Code run
/plugin marketplace add freshtechbro/claudedesignskills. The README names this the recommended install.Install a bundle with Motion
Run
/plugin install core-3d-animation. The README describes it as 5 skills (Three.js, GSAP, R3F, Motion and Babylon) with 9 commands and 6 agents.Or upload a zip
On claude.ai open Settings, Features, Skills, choose Upload skill and select a .zip from .claude/skills/ in the repository.
Or clone and copy
Run
git clone https://github.com/freshtechbro/claudedesignskills.git, then copy .claude/skills/motion-framer into your project.Prompt for it
Ask for a React animation task, such as a card grid with hover lift and a modal that exits smoothly. The skill triggers on interactive UI and animation requests.
Check that it loaded
Ask for a list that animates in and out. The result should use AnimatePresence with unique keys, variants, and staggerChildren on the parent container.
Key features
- Motion componentsAny HTML or SVG element becomes animatable with the motion. prefix, for example motion.div, motion.button, motion.svg and motion.path.
- Animate, initial and transitionCovers target states, mount behavior with initial={false}, and per-property transitions mixing spring and duration-based tweens.
- Variants and staggerNamed states that propagate to children, with staggerChildren, when: beforeChildren or afterChildren and reversed stagger direction on exit.
- Gesture props and eventswhileHover, whileTap, whileFocus, whileDrag and whileInView, plus onHoverStart, onTap, onDragEnd and viewport enter and leave callbacks.
- Exit animationsAnimatePresence rules and examples for modals and lists, including the unique key requirement.
- Layout and shared layoutAnimate position or size with the layout prop, and connect two elements across renders with layoutId.
- Scroll-based revealswhileInView with viewport options once, amount and margin, plus staggered list reveals.
- Spring physicsStiffness, damping and mass controls, visualDuration with bounce, and four named presets.
- Animation hooksuseAnimate for sequences with play, pause and stop controls, useSpring for motion values and useInView for viewport detection.
- Generator and starteranimation_generator.py for 11 animation types, variant_builder.py, and a starter_motion project with three example components.
Frequently asked questions
What is the motion-framer skill?
It is a skill in the freshtechbro design skillstack that documents the Motion animation library for React and JavaScript. It covers motion components, variants, gestures, AnimatePresence exits, layout animations, spring physics, scroll effects and hooks, with scripts and a starter project.
How do I install the motion-framer skill?
Run /plugin marketplace add freshtechbro/claudedesignskills, then /plugin install core-3d-animation, which bundles Motion with four other skills. The README also offers a claude.ai zip upload and a plain clone of the repository, from which you copy the skill folder.
Which AI coding agents can use the motion-framer skill?
The README targets Claude Code and the claude.ai skill upload. No other agent is documented. The skill is a standard SKILL.md folder, but support elsewhere is not confirmed by the repository, so test it in your own tool before depending on it.
Is it Motion or Framer Motion?
Both. The skill describes Motion v11 or later as the smaller modern library from the Framer Motion creators, and Framer Motion as the full-featured predecessor that is still widely used. Its code samples import from framer-motion.
Which frameworks does it work with?
The skill states React 18 or later, Vue, and TypeScript support. It names Next.js, Vite and Remix as compatible. The starter_motion project in the assets folder is set up with Vite.
Does it replace GSAP?
No. The README lists GSAP, Motion and React Spring as alternatives for animation, and the skill has an integration section on combining Motion with GSAP. For scroll-heavy timelines, see gsap-scrolltrigger.
What do the scripts and starter do?
The README says animation_generator.py generates 11 animation types. The folder also has variant_builder.py and a starter_motion project containing DraggableBox, HoverCard and StaggerList components, plus an index.html, a Vite config and a package.json.
Does it cover scroll animations?
Yes, at the viewport level. whileInView, the viewport options once, amount and margin, staggered list reveals and the useInView hook are all documented. For pinned sections and scrubbed timelines, the repository points to its separate GSAP skill, gsap-scrolltrigger.