Motion
SkillDev toolsReact animations with Motion v13 (gestures, scroll, layout, SVG). Use when drag-and-drop, scroll animations, modals, carousels, parallax, or AnimatePresence issues.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Motion skill
What this skill tells your AI
The instructions your AI receives, as published by blockmatic/basilic in .agents/skills/motion-v13/SKILL.md and read by ahel’s review.
Package: motion ^13 (formerly framer-motion). Import from motion/react, not framer-motion.
Folder major tracks the npm motion package, not a skill-file revision. This repo may not list motion in package.json (CSS/tw-animate-css first); keep motion-v13 so pnpm add motion stays aligned. Do not invent -v1 for libraries that have an npm major.
When
Use for drag, scroll-linked, layout, gestures, shared-element transitions. Prefer CSS/tw-animate-css first (see @.cursor/rules/frontend/design.mdc).
Install
pnpm add motion — import { motion, AnimatePresence } from "motion/react".
Motion 13 dropped @emotion/is-prop-valid as an optional dependency. If styled motion components leak CSS-in-JS props to the DOM, inject isValidProp via MotionConfig or compose motion.create(StyledDiv). See https://motion.dev/docs/react-upgrade-guide
Depth
- Corrections vs old Framer Motion APIs: rules/motion.md
- Patterns: references/common-patterns.md
- Next.js
'use client': references/nextjs-integration.md - Perf: references/performance-optimization.md
Signals
- GitHub stars
- 89
- Forks
- 11
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
motion-v13- Source
- github.com/blockmatic/basilic