motion
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
Best use case
motion is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
Teams using motion should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/motion/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How motion Compares
| Feature / Agent | motion | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Use when adding animations with Motion Vue (motion-v) - provides motion component API, gesture animations, scroll-linked effects, layout transitions, and composables for Vue 3/Nuxt
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Motion Vue (motion-v)
Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.
**Current stable:** motion-v 1.x - Vue port of Motion (formerly Framer Motion)
## Overview
Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).
## When to Use
**Use Motion Vue for:**
- Simple declarative animations (fade, slide, scale)
- Gesture-based interactions (hover, tap, drag)
- Scroll-linked animations
- Layout animations and shared element transitions
- Spring physics animations
**Consider alternatives:**
- **GSAP** - Complex timelines, SVG morphing, scroll-triggered sequences
- **@vueuse/motion** - Simpler API, less features, smaller bundle
- **CSS animations** - Simple transitions without JS
## Installation
```bash
# Vue 3
pnpm add motion-v
# Nuxt 3
pnpm add motion-v @vueuse/nuxt
```
```ts
// nuxt.config.ts - Nuxt 3 setup
export default defineNuxtConfig({
modules: ['motion-v/nuxt'],
})
```
## Quick Reference
| Working on... | Load file |
| ---------------------------- | ------------------------- |
| Motion component, gestures | references/components.md |
| useMotionValue, useScroll | references/composables.md |
| Animation examples, patterns | references/examples.md |
## Loading Files
**Consider loading these reference files based on your task:**
- [ ] [references/components.md](references/components.md) - if using Motion component, gestures, or layout animations
- [ ] [references/composables.md](references/composables.md) - if using useMotionValue, useScroll, useSpring, or animate()
- [ ] [references/examples.md](references/examples.md) - if looking for animation patterns or inspiration
**DO NOT load all files at once.** Load only what's relevant to your current task.
## Core Concepts
### Motion Component
Render any HTML/SVG element with animation capabilities:
```vue
<script setup lang="ts">
import { motion } from 'motion-v'
</script>
<template>
<motion.div
:initial="{ opacity: 0, y: 20 }"
:animate="{ opacity: 1, y: 0 }"
:exit="{ opacity: 0, y: -20 }"
:transition="{ duration: 0.3 }"
>
Animated content
</motion.div>
</template>
```
### Gesture Animations
```vue
<motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
Click me
</motion.button>
```
### Scroll Animations
```vue
<motion.div
:initial="{ opacity: 0 }"
:whileInView="{ opacity: 1 }"
:viewport="{ once: true, margin: '-100px' }"
>
Appears on scroll
</motion.div>
```
## Available Guidance
**[references/components.md](references/components.md)** - Motion component variants, animation props, gesture props, layout animations, transition configuration
**[references/composables.md](references/composables.md)** - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()
**[references/examples.md](references/examples.md)** - External resources, component libraries, animation patterns and inspirationRelated Skills
writing-web-documentation
Write, rewrite, review, and organize developer-facing documentation for web software projects. Use when creating or improving README files, docs homepages, quickstarts, tutorials, how-to guides, API/reference pages, conceptual explanations, migration guides, or troubleshooting content for frontend, backend, full-stack, SDK, API, or framework-based web products. This skill applies strong information architecture, task-first page structure, clear voice, runnable examples, version and prerequisite hygiene, accessibility rules, and docs-as-code maintenance habits. Do not use it for marketing copy, legal text, or non-technical customer-support articles.
vueuse
Use when working with VueUse composables - track mouse position with useMouse, manage localStorage with useStorage, detect network status with useNetwork, debounce values with refDebounced, and access browser APIs reactively. Check VueUse before writing custom composables - most patterns already implemented.
vue
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance
vitest
Use when writing unit/integration tests for Vite projects - configure vitest.config.ts, write test suites with describe/it, create mock implementations with vi.fn and vi.mock, set up code coverage thresholds, and run tests in parallel
vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
tsdown
Use when bundling TypeScript libraries - provides tsdown configuration, dual ESM/CJS output, .d.ts generation, package validation, and plugin authoring
ts-library
Use when authoring TypeScript libraries or npm packages - covers project setup, package.json exports, build tooling (tsdown/unbuild), API design patterns, type inference tricks, testing, and publishing to npm. Use when bundling, configuring dual CJS/ESM output, or setting up release workflows.
tresjs
Use when building 3D scenes with TresJS (Vue Three.js) - provides TresCanvas, composables (useTres, useLoop), Cientos helpers (OrbitControls, useGLTF, Environment), and post-processing effects
reka-ui
Use when building with Reka UI (headless Vue components) - provides component API, accessibility patterns, composition (asChild), controlled/uncontrolled state, virtualization, and styling integration. Formerly Radix Vue.
pnpm
Use when managing Node.js dependencies with pnpm - install packages, configure monorepo workspaces, set up pnpm catalogs, resolve dependency conflicts with overrides, patch third-party packages, and configure CI pipelines for pnpm projects
phaser-best-practices
Builds and refactors Phaser 3 browser games. Use for creating a new Phaser project, adding scenes, entities, physics, UI, tilemaps, animations, input, audio, camera, or for fixing Phaser-specific bugs and performance problems.
nuxthub
Use when building NuxtHub v0.10.6 applications - provides database (Drizzle ORM with sqlite/postgresql/mysql), KV storage, blob storage, and cache APIs. Covers configuration, schema definition, migrations, multi-cloud deployment (Cloudflare, Vercel), and the new hub:db, hub:kv, hub:blob virtual module imports.