前端开发

motion

jezweb/claude-skills

Build React animations with Motion (Framer Motion) - gestures (drag, hover, tap), scroll effects, spring physics, layout animations, SVG. Bundle: 2.3 KB (mini) to 34 KB (full). Use when: drag-and-drop, scroll animations, modals, carousels, parallax. Troubleshoot: AnimatePresence exit, list performance, Tailwind conflicts, Next.js "use client".

  • 785 次安装
  • 1100 星标
  • 收录于

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill motion

SKILL.md

Motion Animation Library

Overview

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Key Capabilities:

  • Gestures: drag, hover, tap, pan, focus with cross-device support
  • Scroll Animations: viewport-triggered, scroll-linked, parallax effects
  • Layout Animations: FLIP technique for smooth layout changes, shared element transitions
  • Spring Physics: Natural, customizable motion with physics-based easing
  • SVG: Path morphing, line drawing, attribute animation
  • Exit Animations: AnimatePresence for unmounting transitions
  • Performance: Hardware-accelerated, ScrollTimeline API, bundle optimization (2.3 KB - 34 KB)

Production Tested: React 19.2, Next.js 16.1, Vite 7.3, Tailwind v4