Motion动画库：React动画库，手势、滚动、布局动画与SVG动画

motion by secondsky/claude-skills

161 周安装量

300 GitHub Stars

GitHub

安装命令

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

UI组件库 React 性能优化

🇨🇳中文介绍

Motion 动画库

概述

Motion（包名：motion，原名 framer-motion）是行业标准的 React 动画库，已被数千个生产环境应用所采用。拥有超过 30,200 个 GitHub star 和 300 多个官方示例，它提供了一个声明式 API，可以用最少的代码创建复杂的动画。

核心能力：

手势：拖拽、悬停、点击、平移、聚焦，支持跨设备
滚动动画：视口触发、滚动关联、视差效果
布局动画：使用 FLIP 技术实现平滑的布局变化和共享元素过渡
弹簧物理：基于物理的缓动，实现自然、可定制的运动
SVG：路径变形、线条绘制、属性动画
退出动画：使用 AnimatePresence 实现卸载过渡动画
性能：硬件加速、ScrollTimeline API、包优化（2.3 KB - 34 KB）

生产环境测试：React 19、Next.js 15、Vite 6、Tailwind v4

何时使用此技能

✅ 在以下情况使用 Motion：

复杂交互：

拖放界面（可排序列表、看板、滑块）
带有缩放/旋转/颜色变化的悬停状态
带有弹跳/挤压效果的点击反馈
适用于移动端友好控制的平移手势

基于滚动的动画：

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

❌ 不要在以下情况使用 Motion：

简单的列表动画（改用 auto-animate：3.28 KB 对比 34 KB）
没有交互的静态内容
Cloudflare Workers（使用 framer-motion v12.23.24 变通方案 - 参见已知问题）
3D 动画（改用 Three.js 或 React Three Fiber）

bun add motion  # 推荐
# 或：npm install motion
# 或：yarn add motion

当前版本：12.23.24（验证于 2025-11-07）

Cloudflare Workers 的替代方案：

# 如果部署到 Cloudflare Workers，请使用 framer-motion
bun add framer-motion
# 或：npm install framer-motion

包大小：
- 完整的 motion 组件：约 34 KB（压缩+gzip）
- LazyMotion + m 组件：约 4.6 KB
- useAnimate mini：2.3 KB（最小的 React 动画库）
- useAnimate hybrid：17 KB
依赖项：React 18+ 或 React 19+
TypeScript：包含原生支持（无需 @types 包）

将任何 HTML/SVG 元素转换为可动画的组件：

import { motion } from "motion/react"

// 基础动画
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  内容淡入并向上滑动
</motion.div>

// 手势控制
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  点击我
</motion.button>

initial：起始状态（对象或变体名称）
animate：目标状态（对象或变体名称）
exit：卸载状态（需要 AnimatePresence）
transition：时序/缓动配置
whileHover、whileTap、whileFocus：手势状态
whileInView：视口触发的动画
drag：启用拖拽（"x"、"y" 或 true 表示两者）
layout：启用 FLIP 布局动画

2. 变体（动画编排）

命名的动画状态，可在组件树中传播：

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.div variants={variants} initial="hidden" animate="visible">
  内容
</motion.div>

对于高级编排（staggerChildren、delayChildren、动态变体），请加载 references/core-concepts-deep-dive.md。

3. AnimatePresence（退出动画）

在组件卸载时启用动画：

import { AnimatePresence } from "motion/react"

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      模态内容
    </motion.div>
  )}
</AnimatePresence>

AnimatePresence 必须保持挂载（不要用条件语句包裹）
所有子元素必须具有唯一的 key 属性
AnimatePresence 包裹条件语句，而不是反过来

常见错误（退出动画不会播放）：

// ❌ 错误 - AnimatePresence 随条件卸载
{isVisible && (
  <AnimatePresence>
    <motion.div>内容</motion.div>
  </AnimatePresence>
)}

// ✅ 正确 - AnimatePresence 保持挂载
<AnimatePresence>
  {isVisible && <motion.div key="unique">内容</motion.div>}
</AnimatePresence>

4. 布局动画（FLIP）

自动动画化布局变化：

<motion.div layout>
  {isExpanded ? <FullContent /> : <Summary />}
</motion.div>

特殊属性：layoutId（共享元素过渡）、layoutScroll（可滚动容器）、layoutRoot（固定定位）。

对于高级模式（LayoutGroup、layoutId 编排），请加载 references/core-concepts-deep-dive.md。

// 视口触发
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
>
  进入视口时淡入
</motion.div>

// 滚动关联（视差）
import { useScroll, useTransform } from "motion/react"
const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -300])
<motion.div style={{ y }}>视差效果</motion.div>

对于高级滚动模式（useScroll 偏移量、useTransform 缓动、视差图层），请加载 references/core-concepts-deep-dive.md。

<motion.div drag="x" dragConstraints={{ left: -200, right: 200 }}>
  拖拽我
</motion.div>

可用：whileHover、whileTap、whileFocus、whileDrag、whileInView、drag。

对于高级拖拽控制（动量、弹性、事件处理器），请加载 references/core-concepts-deep-dive.md。

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
/>

常用预设：弹跳 { stiffness: 300, damping: 10 }，平滑 { stiffness: 100, damping: 20 }。

对于弹簧调优（质量、可视化工具、预设），请加载 references/core-concepts-deep-dive.md。

Vite：bun add motion → import { motion } from "motion/react"（开箱即用）

Next.js App Router：需要 "use client" 指令或客户端组件包装器

"use client"
import { motion } from "motion/react"

Tailwind：⚠️ 移除 transition-* 类（会导致与 Motion 动画冲突）

Cloudflare Workers：改用 framer-motion v12.23.24（Motion 存在 Wrangler 构建问题）

对于完整的集成指南（Next.js 模式、SSR、框架特定问题），请加载 references/nextjs-integration.md。

包大小：使用 LazyMotion（34 KB → 4.6 KB）：

import { LazyMotion, domAnimation, m } from "motion/react"
<LazyMotion features={domAnimation}>
  <m.div>仅 4.6 KB！</m.div>
</LazyMotion>

大型列表：对于 50 个以上的动画项目，使用虚拟化（react-window、react-virtuoso）。

对于完整的优化指南（硬件加速、内存分析、生产环境基准测试），请加载 references/performance-optimization.md。

尊重 prefers-reduced-motion：

import { MotionConfig } from "motion/react"
<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

键盘支持：使用 whileFocus 实现键盘触发的动画。

<motion.button whileFocus={{ scale: 1.1 }} tabIndex={0}>
  键盘可访问
</motion.button>

对于完整的可访问性指南（ARIA 模式、屏幕阅读器、AnimatePresence 变通方案、测试），请加载 references/accessibility-guide.md。

模态对话框（AnimatePresence + 背景）：

<AnimatePresence>
  {isOpen && (
    <motion.dialog exit={{ opacity: 0 }}>内容</motion.dialog>
  )}
</AnimatePresence>

手风琴（高度动画）：

<motion.div animate={{ height: isOpen ? "auto" : 0 }}>
  内容
</motion.div>

对于 15 个以上的生产环境模式（轮播、标签页、滚动显现、视差、通知），请加载 references/common-patterns.md。

已知问题与解决方案

问题 1：AnimatePresence 退出动画不工作（最常见）

症状：组件瞬间消失，没有退出动画。

解决方案：AnimatePresence 必须保持挂载，包裹条件语句（而不是被条件语句包裹）：

// ❌ 错误
{isVisible && <AnimatePresence><motion.div>内容</motion.div></AnimatePresence>}

// ✅ 正确
<AnimatePresence>
  {isVisible && <motion.div key="unique">内容</motion.div>}
</AnimatePresence>

问题 2：Next.js 缺少 "use client"

症状：构建失败，提示 "motion is not defined" 或 SSR 错误。

解决方案：添加 "use client" 指令：

"use client"
import { motion } from "motion/react"

问题 3：Tailwind Transitions 冲突

症状：动画卡顿或不工作。

解决方案：移除 transition-* 类（Motion 会覆盖 CSS 过渡）：

// ❌ 错误：<motion.div className="transition-all" animate={{ x: 100 }} />
// ✅ 正确：<motion.div animate={{ x: 100 }} />

问题 4：Cloudflare Workers 构建错误

症状：使用 motion 包时 Wrangler 构建失败。

解决方案：改用 framer-motion v12.23.24（GitHub issue #2918）：

bun add framer-motion  # 相同的 API，适用于 Workers

问题 5：大型列表性能

症状：50-100 个以上的动画项目导致严重减速。

解决方案：使用虚拟化（react-window、react-virtuoso）。

对于 5 个以上的其他问题（layoutScroll、layoutRoot、AnimatePresence + layoutId），请加载 references/nextjs-integration.md 或 references/core-concepts-deep-dive.md。

何时加载参考文档

Claude 应根据用户需求加载这些参考文档：

当以下情况时加载 `references/core-concepts-deep-dive.md`：

用户询问变体编排（staggerChildren、delayChildren、动态变体）
用户需要高级布局动画（layoutId 共享过渡、LayoutGroup）
用户想要滚动关联动画（useScroll 偏移量、useTransform 缓动、视差图层）
用户需要复杂的拖拽模式（动量、弹性、事件处理器、约束）
用户询问弹簧物理调优（质量参数、可视化工具、自定义预设）

当以下情况时加载 `references/performance-optimization.md`：

用户希望将包大小减少到 4.6 KB 以下（useAnimate mini、LazyMotion 对比）
用户提到"应用很慢"、"动画卡顿"、"延迟"或"性能问题"
用户在列表中有 50 个以上的动画项目（需要虚拟化）
用户需要内存分析或生产环境基准测试

当以下情况时加载 `references/nextjs-integration.md`：

用户正在使用 Next.js 构建（App Router 或 Pages Router）
用户遇到 SSR 错误、"use client" 错误或水合问题
用户询问路由过渡或页面导航动画
用户需要 Next.js 特定的变通方案（Reorder 组件、AnimatePresence 软导航）

当以下情况时加载 `references/accessibility-guide.md`：

用户询问 "prefers-reduced-motion" 或可访问性合规性
用户需要 ARIA 集成模式（角色、标签、公告）
用户想要屏幕阅读器兼容性
用户提到可访问性审计或 WCAG 合规性
用户询问 AnimatePresence reducedMotion 变通方案（已知问题 #1567）

当以下情况时加载 `references/common-patterns.md`：

用户询问特定的 UI 模式（模态、手风琴、轮播、标签页、下拉菜单、提示等）
用户需要用于生产环境的复制粘贴代码示例
用户想要查看 15 个以上的真实世界动画模式

当以下情况时加载 `references/motion-vs-auto-animate.md`：

用户正在决定使用 Motion 还是 AutoAnimate 库
用户提到"简单的列表动画"或"包大小顾虑"
用户询问"我应该使用哪个动画库？"或"Motion 是否过度设计？"
用户需要功能对比或决策矩阵

此技能在 templates/ 目录中包含 5 个生产就绪的模板：

motion-vite-basic.tsx - 基础 Vite + React + TypeScript 设置，包含常见动画
motion-nextjs-client.tsx - Next.js App Router 模式，包含客户端组件包装器
scroll-parallax.tsx - 滚动动画、视差和视口触发器
ui-components.tsx - 模态、手风琴、轮播、带有共享下划线的标签页
layout-transitions.tsx - FLIP 布局动画和共享元素过渡

将模板复制到您的项目中并根据需要进行自定义。

此技能包含 4 个全面的参考指南：

motion-vs-auto-animate.md - 决策指南：何时使用 Motion 与 AutoAnimate
performance-optimization.md - 包大小、LazyMotion、虚拟化、硬件加速
nextjs-integration.md - App Router 与 Pages Router、"use client"、已知问题
common-patterns.md - 前 15 个模式，包含完整代码示例

详细指南请参见 references/ 目录。

此技能包含 2 个自动化脚本：

init-motion.sh - 一键设置，包含框架检测（Vite、Next.js、Cloudflare Workers）
optimize-bundle.sh - 将现有的 Motion 代码转换为 LazyMotion，以获得更小的包

自动化工具请参见 scripts/ 目录。

官方网站：https://motion.dev
GitHub：https://github.com/motiondivision/motion（30,200+ star）
示例：https://motion.dev/examples（300+ 示例）

相关技能：auto-animate（简单列表）、tailwind-v4-shadcn（样式）、nextjs（App Router）、cloudflare-worker-base

Motion 与 AutoAnimate 对比：加载 references/motion-vs-auto-animate.md 获取详细对比。

令牌节省：约 83%（30k → 5k 令牌） | 错误预防：100%（29+ 个错误） | 时间节省：约 85%（2-3 小时 → 20-30 分钟）

包版本（验证于 2025-11-07）

包	版本	状态
motion	12.23.24	✅ 最新稳定版
framer-motion	12.23.24	✅ Cloudflare 的替代方案
react	19.2.0	✅ 最新稳定版
vite	6.0.0	✅ 最新稳定版

发现问题或有建议？

提交问题：https://github.com/secondsky/claude-skills/issues
查看模板和参考文档获取详细示例

生产环境测试：✅ React 19 + Next.js 15 + Vite 6 + Tailwind v4 令牌节省：约 83% 错误预防：100%（29+ 个已记录的错误被预防） 包大小：2.3 KB（mini）- 34 KB（完整版），使用 LazyMotion 可优化至 4.6 KB 可访问性：MotionConfig reducedMotion 支持 准备就绪！ 使用 ./scripts/install-skill.sh motion 安装

🇺🇸English

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, Next.js 15, Vite 6, Tailwind v4

When to Use This Skill

✅ Use Motion When:

Complex Interactions :

Drag-and-drop interfaces (sortable lists, kanban boards, sliders)
Hover states with scale/rotation/color changes
Tap feedback with bounce/squeeze effects
Pan gestures for mobile-friendly controls

Scroll-Based Animations :

Hero sections with parallax layers
Scroll-triggered reveals (fade in as elements enter viewport)
Progress bars linked to scroll position
Sticky headers with scroll-dependent transforms

Layout Transitions :

Shared element transitions between routes (card → detail page)
Expand/collapse with automatic height animation
Grid/list view switching with smooth repositioning
Tab navigation with animated underline

Advanced Features :

SVG line drawing animations
Path morphing between shapes
Spring physics for natural bounce
Orchestrated sequences (staggered reveals)
Modal dialogs with backdrop blur

Bundle Optimization :

Need 2.3 KB animation library (useAnimate mini)
Want to reduce Motion from 34 KB to 4.6 KB (LazyMotion)

❌ Don't Use Motion When:

Simple list animations (use auto-animate instead: 3.28 KB vs 34 KB)
Static content without interactions
Cloudflare Workers (use framer-motion v12.23.24 workaround - see Known Issues)
3D animations (use Three.js or React Three Fiber instead)

Installation

Latest Stable Version

bun add motion  # preferred
# or: npm install motion
# or: yarn add motion

Current Version : 12.23.24 (verified 2025-11-07)

Alternative for Cloudflare Workers :

# Use framer-motion if deploying to Cloudflare Workers
bun add framer-motion
# or: npm install framer-motion

Package Information

Bundle Size :
- Full motion component: ~34 KB minified+gzipped
- LazyMotion + m component: ~4.6 KB
- useAnimate mini: 2.3 KB (smallest React animation library)
- useAnimate hybrid: 17 KB
Dependencies : React 18+ or React 19+
TypeScript : Native support included (no @types package needed)

Core Concepts

1. The `motion` Component

Transform any HTML/SVG element into an animatable component:

import { motion } from "motion/react"

// Basic animation
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Content fades in and slides up
</motion.div>

// Gesture controls
<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.95 }}
>
  Click me
</motion.button>

Props:

initial: Starting state (object or variant name)
animate: Target state (object or variant name)
exit: Unmounting state (requires AnimatePresence)
transition: Timing/easing configuration
whileHover, whileTap, whileFocus: Gesture states
whileInView: Viewport-triggered animation
drag: Enable dragging ("x", "y", or true for both)
layout: Enable FLIP layout animations

2. Variants (Animation Orchestration)

Named animation states that propagate through component tree:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.div variants={variants} initial="hidden" animate="visible">
  Content
</motion.div>

For advanced orchestration (staggerChildren, delayChildren, dynamic variants), load references/core-concepts-deep-dive.md.

3. AnimatePresence (Exit Animations)

Enables animations when components unmount:

import { AnimatePresence } from "motion/react"

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Modal content
    </motion.div>
  )}
</AnimatePresence>

Critical Rules:

AnimatePresence must stay mounted (don't wrap in conditional)
All children must have uniquekey props
AnimatePresence wraps the conditional , not the other way around

Common Mistake (exit animation won't play):

// ❌ Wrong - AnimatePresence unmounts with condition
{isVisible && (
  <AnimatePresence>
    <motion.div>Content</motion.div>
  </AnimatePresence>
)}

// ✅ Correct - AnimatePresence stays mounted
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

4. Layout Animations (FLIP)

Automatically animate layout changes:

<motion.div layout>
  {isExpanded ? <FullContent /> : <Summary />}
</motion.div>

Special props : layoutId (shared element transitions), layoutScroll (scrollable containers), layoutRoot (fixed positioning).

For advanced patterns (LayoutGroup, layoutId orchestration), load references/core-concepts-deep-dive.md.

5. Scroll Animations

// Viewport-triggered
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}
>
  Fades in when entering viewport
</motion.div>

// Scroll-linked (parallax)
import { useScroll, useTransform } from "motion/react"
const { scrollYProgress } = useScroll()
const y = useTransform(scrollYProgress, [0, 1], [0, -300])
<motion.div style={{ y }}>Parallax effect</motion.div>

For advanced scroll patterns (useScroll offsets, useTransform easing, parallax layers), load references/core-concepts-deep-dive.md.

6. Gestures

<motion.div drag="x" dragConstraints={{ left: -200, right: 200 }}>
  Drag me
</motion.div>

Available : whileHover, whileTap, whileFocus, whileDrag, whileInView, drag.

For advanced drag controls (momentum, elastic, event handlers), load references/core-concepts-deep-dive.md.

7. Spring Physics

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring", stiffness: 100, damping: 10 }}
/>

Common presets : Bouncy { stiffness: 300, damping: 10 }, Smooth { stiffness: 100, damping: 20 }.

For spring tuning (mass, visualizer, presets), load references/core-concepts-deep-dive.md.

Integration Guides

Vite : bun add motion → import { motion } from "motion/react" (works out of the box)

Next.js App Router : Requires "use client" directive or client component wrapper

"use client"
import { motion } from "motion/react"

Tailwind : ⚠️ Remove transition-* classes (causes conflicts with Motion animations)

Cloudflare Workers : Use framer-motion v12.23.24 instead (Motion has Wrangler build issues)

For complete integration guides (Next.js patterns, SSR, framework-specific issues), load references/nextjs-integration.md.

Performance Optimization

Bundle Size : Use LazyMotion (34 KB → 4.6 KB):

import { LazyMotion, domAnimation, m } from "motion/react"
<LazyMotion features={domAnimation}>
  <m.div>Only 4.6 KB!</m.div>
</LazyMotion>

Large Lists : Use virtualization (react-window, react-virtuoso) for 50+ animated items.

For complete optimization guide (hardware acceleration, memory profiling, production benchmarks), load references/performance-optimization.md.

Accessibility

Respectprefers-reduced-motion:

import { MotionConfig } from "motion/react"
<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>

Keyboard Support : Use whileFocus for keyboard-triggered animations.

<motion.button whileFocus={{ scale: 1.1 }} tabIndex={0}>
  Keyboard accessible
</motion.button>

For complete accessibility guide (ARIA patterns, screen readers, AnimatePresence workaround, testing), load references/accessibility-guide.md.

Common Patterns

Modal Dialog (AnimatePresence + backdrop):

<AnimatePresence>
  {isOpen && (
    <motion.dialog exit={{ opacity: 0 }}>Content</motion.dialog>
  )}
</AnimatePresence>

Accordion (height animation):

<motion.div animate={{ height: isOpen ? "auto" : 0 }}>
  Content
</motion.div>

For 15+ production patterns (carousel, tabs, scroll reveal, parallax, notifications), load references/common-patterns.md.

Known Issues & Solutions

Issue 1: AnimatePresence Exit Not Working (MOST COMMON)

Symptom : Components disappear instantly without exit animation.

Solution : AnimatePresence must stay mounted, wrap the conditional (not be wrapped by it):

// ❌ Wrong
{isVisible && <AnimatePresence><motion.div>Content</motion.div></AnimatePresence>}

// ✅ Correct
<AnimatePresence>
  {isVisible && <motion.div key="unique">Content</motion.div>}
</AnimatePresence>

Issue 2: Next.js "use client" Missing

Symptom : Build fails with "motion is not defined" or SSR errors.

Solution : Add "use client" directive:

"use client"
import { motion } from "motion/react"

Issue 3: Tailwind Transitions Conflict

Symptom : Animations stutter or don't work.

Solution : Remove transition-* classes (Motion overrides CSS transitions):

// ❌ Wrong: <motion.div className="transition-all" animate={{ x: 100 }} />
// ✅ Correct: <motion.div animate={{ x: 100 }} />

Issue 4: Cloudflare Workers Build Errors

Symptom : Wrangler build fails when using motion package.

Solution : Use framer-motion v12.23.24 instead (GitHub issue #2918):

bun add framer-motion  # Same API, works with Workers

Issue 5: Large List Performance

Symptom : 50-100+ animated items cause severe slowdown.

Solution : Use virtualization (react-window, react-virtuoso).

For 5+ additional issues (layoutScroll, layoutRoot, AnimatePresence + layoutId), load references/nextjs-integration.md or references/core-concepts-deep-dive.md.

When to Load References

Claude should load these references based on user needs:

Load `references/core-concepts-deep-dive.md` when:

User asks about variants orchestration (staggerChildren, delayChildren, dynamic variants)
User needs advanced layout animations (layoutId shared transitions, LayoutGroup)
User wants scroll-linked animations (useScroll offsets, useTransform easing, parallax layers)
User needs complex drag patterns (momentum, elastic, event handlers, constraints)
User asks about spring physics tuning (mass parameter, visualizer, custom presets)

Load `references/performance-optimization.md` when:

User wants to reduce bundle size below 4.6 KB (useAnimate mini, LazyMotion comparison)
User mentions "app is slow", "janky animations", "laggy", or "performance issues"
User has 50+ animated items in a list (virtualization needed)
User needs memory profiling or production benchmarks

Load `references/nextjs-integration.md` when:

User is building with Next.js (App Router or Pages Router)
User encounters SSR errors, "use client" errors, or hydration issues
User asks about route transitions or page navigation animations
User needs Next.js-specific workarounds (Reorder component, AnimatePresence soft navigation)

Load `references/accessibility-guide.md` when:

User asks about "prefers-reduced-motion" or accessibility compliance
User needs ARIA integration patterns (roles, labels, announcements)
User wants screen reader compatibility
User mentions accessibility audits or WCAG compliance
User asks about AnimatePresence reducedMotion workaround (known issue #1567)

Load `references/common-patterns.md` when:

User asks for specific UI patterns (modal, accordion, carousel, tabs, dropdown, toast, etc.)
User needs copy-paste code examples for production use
User wants to see 15+ real-world animation patterns

Load `references/motion-vs-auto-animate.md` when:

User is deciding between Motion and AutoAnimate libraries
User mentions "simple list animations" or "bundle size concerns"
User asks "which animation library should I use?" or "is Motion overkill?"
User needs feature comparison or decision matrix

Templates

This skill includes 5 production-ready templates in the templates/ directory:

motion-vite-basic.tsx - Basic Vite + React + TypeScript setup with common animations
motion-nextjs-client.tsx - Next.js App Router pattern with client component wrapper
scroll-parallax.tsx - Scroll animations, parallax, and viewport triggers
ui-components.tsx - Modal, accordion, carousel, tabs with shared underline
layout-transitions.tsx - FLIP layout animations and shared element transitions

Copy templates into your project and customize as needed.

References

This skill includes 4 comprehensive reference guides:

motion-vs-auto-animate.md - Decision guide: when to use Motion vs AutoAnimate
performance-optimization.md - Bundle size, LazyMotion, virtualization, hardware acceleration
nextjs-integration.md - App Router vs Pages Router, "use client", known issues
common-patterns.md - Top 15 patterns with full code examples

See references/ directory for detailed guides.

Scripts

This skill includes 2 automation scripts:

init-motion.sh - One-command setup with framework detection (Vite, Next.js, Cloudflare Workers)
optimize-bundle.sh - Convert existing Motion code to LazyMotion for smaller bundle

See scripts/ directory for automation tools.

Official Documentation

Official Site : https://motion.dev
GitHub : https://github.com/motiondivision/motion (30,200+ stars)
Examples : https://motion.dev/examples (300+ examples)

Related Skills : auto-animate (simple lists), tailwind-v4-shadcn (styling), nextjs (App Router), cloudflare-worker-base

Motion vs AutoAnimate : Load references/motion-vs-auto-animate.md for detailed comparison.

Token Efficiency Metrics

Token Savings : ~83% (30k → 5k tokens) | Error Prevention : 100% (29+ errors) | Time Savings : ~85% (2-3 hrs → 20-30 min)

Package Versions (Verified 2025-11-07)

Package	Version	Status
motion	12.23.24	✅ Latest stable
framer-motion	12.23.24	✅ Alternative for Cloudflare
react	19.2.0	✅ Latest stable
vite	6.0.0	✅ Latest stable

Contributing

Found an issue or have a suggestion?

Open an issue: https://github.com/secondsky/claude-skills/issues
See templates and references for detailed examples

Production Tested : ✅ React 19 + Next.js 15 + Vite 6 + Tailwind v4 Token Savings : ~83% Error Prevention : 100% (29+ documented errors prevented) Bundle Size : 2.3 KB (mini) - 34 KB (full), optimizable to 4.6 KB with LazyMotion Accessibility : MotionConfig reducedMotion support Ready to use! Install with ./scripts/install-skill.sh motion

Weekly Installs

161

Repository

secondsky/claude-skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode139

gemini-cli139

codex137

cursor137

github-copilot134

claude-code134

TanStack Query v5 完全指南：React 数据管理、乐观更新、离线支持

2,500 周安装

Motion动画库：React动画库，手势、滚动、布局动画与SVG动画

🇨🇳中文介绍

Motion 动画库

概述

何时使用此技能

✅ 在以下情况使用 Motion：

相关 Skills

❌ 不要在以下情况使用 Motion：

安装

最新稳定版本

包信息

核心概念

1. motion 组件

2. 变体（动画编排）

3. AnimatePresence（退出动画）

4. 布局动画（FLIP）

5. 滚动动画

6. 手势

7. 弹簧物理

集成指南

性能优化

可访问性

常见模式