mcpField
M
motion-v13

motion-v13

github.com/blockmaticDesign & UI1242 installsUpdated 4w ago
Repository

About motion-v13

motion-v13 is a frontend skill for using motion ^13 in React projects. It covers animation patterns for drag, scroll-linked effects, layout, gestures, and shared-element transitions, while recommending CSS first where suitable.

Key features

  1. 01Motion ^13 setup and imports
  2. 02Drag and gesture animation guidance
  3. 03Scroll-linked and layout effects
  4. 04Shared-element transition guidance
  5. 05Next.js and performance references

Use cases

  1. 01Add drag interactions to a React interface
  2. 02Create scroll-linked animation effects
  3. 03Build layout or shared-element transitions

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/blockmatic/basilic-skills --skill motion-v13

After installing, type/motion-v13in Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
common-patterns.md
nextjs-integration.md
performance-optimization.md
rules/
motion.md

Details

From the project README

Motion

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

Comments

Markdown supported