Individual skill

motion-framer

Use when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation. Do not use for static styling, backend/API work, or animation in another runtime unless Motion/Framer Motion is an explicit dependency.

skills/frontend/motion-framer/SKILL.md

Read pinned source

Source commit 849719987d9c0d6ed973bdbce8ed37b266d3b1f3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Network or broad shell
Last checked: Nov 7, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 214
Repository last updated: Nov 5, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

ai-agents Repository topic
claude Repository topic
claude-code Repository topic
llm Repository topic
machine-learning Repository topic
prompt-engineering Repository topic
skills Repository topic
mcp Repository topic
agent-harness Repository topic
harness Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

LICENSEasset · 1,078 bytes
SKILL.mdcore · 20,984 bytes
assets/examples/README.mddoc · 73,986 bytes
assets/starter_motion/README.mddoc · 6,762 bytes
assets/starter_motion/index.htmlasset · 958 bytes
assets/starter_motion/package.jsonruns · 452 bytes
assets/starter_motion/src/App.cssasset · 1,747 bytes
assets/starter_motion/src/App.jsxruns · 3,513 bytes
assets/starter_motion/src/components/DraggableBox.jsxruns · 1,439 bytes
assets/starter_motion/src/components/HoverCard.jsxruns · 803 bytes
assets/starter_motion/src/components/StaggerList.jsxruns · 1,582 bytes
assets/starter_motion/src/main.jsxruns · 208 bytes
assets/starter_motion/vite.config.jsruns · 210 bytes
references/api_reference.mddoc · 20,478 bytes
scripts/animation_generator.pyruns · 15,573 bytes
scripts/variant_builder.pyruns · 13,942 bytes

Read excerpt


# 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:**
- Building interactive UI components (buttons, cards, menus)
- Creating micro-interactions and hover effects
- Implementing page transitions and route animations
- Adding scroll-based animations and parallax effects
- Animating layout changes (resizing, reordering, shared element transitions)
- Drag-and-drop interfaces
- Complex animation sequences and state-based animations