菜单
Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/yonatangross/orchestkit --skill animation-motion-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | animation-motion-design |
| license | MIT |
| compatibility | Claude Code 2.1.220+. |
| description | Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion. |
| tags | ["animation","motion","framer-motion","view-transitions","micro-interactions","gestures","layout-animation","AnimatePresence","prefers-reduced-motion","spring-physics"] |
| context | fork |
| agent | frontend-ui-developer |
| version | 1.0.0 |
| author | OrchestKit |
| user-invocable | false |
| disable-model-invocation | true |
| complexity | medium |
| persuasion-type | reference |
| targets | [{"library":"motion","version":">=12.0.0"}] |
| metadata | {"category":"document-asset-creation"} |
| allowed-tools | ["Read","Glob","Grep","WebFetch","WebSearch"] |
| path_patterns | ["**/animation/**","**/motion/**","*.motion.*","*.framer.*"] |
Patterns for building performant, accessible animations using Motion (formerly Framer Motion, 18M+ weekly npm downloads) and the View Transitions API (cross-browser support in 2026). Covers layout animations, gesture interactions, exit transitions, micro-interactions, and motion accessibility.
| Rule | File | Impact | When to Use |
|---|---|---|---|
| Layout Animations | rules/motion-layout.md | HIGH | Shared layout transitions, FLIP animations, layoutId |
| Gesture Interactions | rules/motion-gestures.md | HIGH | Drag, hover, tap with spring physics |
| Exit Animations | rules/motion-exit.md | HIGH | AnimatePresence, unmount transitions |
| View Transitions API | rules/view-transitions-api.md | HIGH | Page navigation, cross-document transitions |
| Motion Accessibility | rules/motion-accessibility.md | CRITICAL | prefers-reduced-motion, cognitive load |
| Motion Performance | rules/motion-performance.md | HIGH | 60fps, GPU compositing, layout thrash |
Total: 6 rules across 3 categories
| Scenario | Recommendation | Why |
|---|---|---|
| Component mount/unmount | Motion | AnimatePresence handles lifecycle |
| Page navigation transitions | View Transitions API | Built-in browser support, works with any router |
| Complex interruptible animations | Motion | Spring physics, gesture interruption |
| Simple crossfade between pages | View Transitions API | Zero JS bundle cost |
| Drag/reorder interactions | Motion | drag prop with layout animations |
| Shared element across routes | View Transitions API |
| viewTransitionName CSS property |
| Scroll-triggered animations | Motion | useInView, useScroll hooks |
| Multi-step orchestrated sequences | Motion | staggerChildren, variants |
import { motion, AnimatePresence } from "motion/react"
const fadeInUp = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: -10 },
transition: { type: "spring", stiffness: 300, damping: 24 },
}
function Card({ item }: { item: Item }) {
return (
<motion.div {...fadeInUp} layout layoutId={item.id}>
{item.content}
</motion.div>
)
}
function CardList({ items }: { items: Item[] }) {
return (
<AnimatePresence mode="wait">
{items.map((item) => (
<Card key={item.id} item={item} />
))}
</AnimatePresence>
)
}
// React Router v7+ with View Transitions
import { Link, useNavigate } from "react-router"
function NavLink({ to, children }: { to: string; children: React.ReactNode }) {
return <Link to={to} viewTransition>{children}</Link>
}
// CSS for the transition
// ::view-transition-old(root) { animation: fade-out 200ms ease; }
// ::view-transition-new(root) { animation: fade-in 200ms ease; }
import { useReducedMotion } from "motion/react"
function AnimatedComponent() {
const shouldReduceMotion = useReducedMotion()
return (
<motion.div
animate={{ x: 100 }}
transition={shouldReduceMotion
? { duration: 0 }
: { type: "spring", stiffness: 300, damping: 24 }
}
/>
)
}
FLIP-based layout animations with the layout prop and shared layout transitions via layoutId.
Load:
rules/motion-layout.md
Drag, hover, and tap interactions with spring physics and gesture composition.
Load:
rules/motion-gestures.md
AnimatePresence for animating components as they unmount from the React tree.
Load:
rules/motion-exit.md
Browser-native page transitions using document.startViewTransition() and framework integrations.
Load:
rules/view-transitions-api.md
Respecting user motion preferences and reducing cognitive load with motion sensitivity patterns.
Load:
rules/motion-accessibility.md
GPU compositing, avoiding layout thrash, and keeping animations at 60fps.
Load:
rules/motion-performance.md
transform and opacity (composite properties). Never animate width, height, top, or left.stiffness/damping, not duration.prefers-reduced-motion and provide instant alternatives.| Metric | Target | Measurement |
|---|---|---|
| Transition duration | < 400ms | User perception threshold |
| Animation properties | transform, opacity only | DevTools > Rendering > Paint flashing |
| JS bundle (Motion) | ~16KB gzipped | Import only what you use |
| First paint delay | 0ms | Animations must not block render |
| Frame drops | < 5% of frames | Performance API: PerformanceObserver |
width, height, margin, padding directly. Use transform: scale() instead.stiffness/damping, not duration. Mixing causes unexpected behavior.document.startViewTransition().| Resource | Description |
|---|---|
| references/motion-vs-view-transitions.md | Comparison table, browser support, limitations |
| references/animation-presets-library.md | Copy-paste preset variants for common patterns |
| references/micro-interactions-catalog.md | Button press, toggle, checkbox, loading, success/error |
ork:ui-components — shadcn/ui component patterns and CVA variantsork:responsive-patterns — Responsive layout and container query patternsork:performance — Core Web Vitals and runtime performance optimizationork:accessibility — WCAG compliance, ARIA patterns, screen reader supportChain patterns for multi-phase pipelines: MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building or debugging a pipeline skill.
OrchestKit doctor for health diagnostics across manifest integrity, hook configuration, skill validation, agent frontmatter, MCP server connectivity, CC version compatibility, and permission rules. Reports issues with severity levels and auto-remediation suggestions. Validates component counts, detects orphaned entries, and checks CC version matrix compliance. Use when diagnosing plugin health, troubleshooting configuration issues, or running pre-release checks.
Inspects the OrchestKit telemetry pipeline for the current project — lists all known telemetry files with write counts, sizes, schema status, growth trend, and orphan detection. Use when verifying the observability pipeline is healthy, debugging a missing writer, or auditing which files have schema locks vs. which are drift-vulnerable. Read-only — never modifies telemetry files.