Install this skill
npx skills add onmax/nuxt-skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
Motion Vue (motion-v) provides a Vue 3 implementation of the motion library, bringing declarative animation logic to components. It handles visual state changes through a controlled API that maps standard HTML elements to animatable counterparts. The library focuses on performance by utilizing hardware acceleration for layout transformations and spring-based physics. Developers define visual states for mounting, unmounting, and hover or tap interactions directly within the template or script sections. It replaces manual CSS transition management with a script-based approach that syncs element properties with motion values. This package is optimized for Nuxt 3 environments, allowing for simplified integration through module configuration. It provides predictable interpolation and gesture tracking while maintaining a small footprint, ensuring that complex UI interactions do not degrade core performance metrics during user navigation.
When to Use This Skill
- •Adding entrance transitions to list items or cards
- •Creating interactive buttons with scale or rotation feedback
- •Triggering reveal animations as elements enter the viewport
- •Synchronizing element positions across state changes
- •Applying complex spring physics to UI components
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- “How do I add a spring animation to my Vue component?
- “Animate elements when they scroll into view
- “Add hover and click effects to a button in Nuxt
- “How to manage enter and leave transitions with Motion Vue
- “Bind motion values to scroll position in Vue 3
Pro Tips
- 💡When requesting complex sequences, break them down into smaller, composable Motion Vue animations and let the agent orchestrate their timing, rather than trying to describe one monolithic animation.
- 💡Specify performance considerations explicitly (e.g., 'prioritize hardware-accelerated transforms') when generating animations to ensure the agent outputs highly optimized code.
- 💡For shared layout transitions, guide the agent to correctly identify the `layoutId` props for matching elements across different states, ensuring seamless visual continuity.
What this skill does
- •Declarative animation states for mount, unmount, and hover
- •Spring-based physics for natural motion transitions
- •Hardware-accelerated layout and shared element movement
- •Gesture-responsive props for interaction feedback
- •Viewport-aware animations triggered by scroll position
When not to use it
- ✕Projects requiring complex SVG path morphing or timeline sequences
- ✕High-performance tasks better suited for direct GPU-accelerated canvas API
- ✕Simple state-driven changes that only require native CSS keyframes
Example workflow
- Install the motion-v package and register the Nuxt module
- Import the Motion component into your Vue file
- Define initial, animate, and exit prop objects on the element
- Apply gesture props like whileHover for immediate interaction feedback
- Configure custom spring or duration values within the transition prop
Prerequisites
- –Vue 3
- –Nuxt 3 (recommended for module integration)
Pitfalls & limitations
- !Over-animating elements can lead to UI clutter and accessibility issues
- !Mixing local motion-v animations with global CSS transitions may cause visual conflicts
- !Large-scale layout animations on complex DOM trees may require performance tuning
FAQ
Is motion-v the same as @vueuse/motion?
No, motion-v is a specific port of the Motion library. While similar in purpose, they provide different APIs and feature sets.
Can I use this for complex animation sequences?
Motion-v is built for declarative component states. If your project requires frame-perfect timeline control, consider using GSAP.
Does this work with server-side rendering?
Yes, it is designed for Nuxt 3, though complex layout animations are primarily evaluated on the client-side after hydration.
How it compares
Motion-v replaces verbose CSS class toggling and manual event listeners with a declarative syntax, providing tighter synchronization between element state and physical motion properties.
📄 Full skill instructions — original source: onmax/nuxt-skills
# 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
## 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
**Load one file at a time based on context:**
- Component animations → [references/components.md](references/components.md)
- Composables, motion values → [references/composables.md](references/composables.md)
- Examples, inspiration → [references/examples.md](references/examples.md)
## Core Concepts
### Motion Component
Render any HTML/SVG element with animation capabilities:
### Gesture Animations
### Scroll Animations
## 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 inspiration
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
# Vue 3
pnpm add motion-v
# Nuxt 3
pnpm add motion-v @vueuse/nuxt// 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
**Load one file at a time based on context:**
- Component animations → [references/components.md](references/components.md)
- Composables, motion values → [references/composables.md](references/composables.md)
- Examples, inspiration → [references/examples.md](references/examples.md)
## Core Concepts
### Motion Component
Render any HTML/SVG element with animation capabilities:
<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
<Motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
Click me
</Motion.button>### Scroll Animations
<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 inspiration
By Onmax
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/motion/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/onmax/nuxt-skills/motion/SKILL.md - Cursor:
~/.cursor/skills/onmax/nuxt-skills/motion/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/onmax/nuxt-skills/motion/SKILL.md
🚀 Install with CLI:npx skills add onmax/nuxt-skills
Recommended Rules
View more rules →Web Animation & Motion Design Expert
AnimationMotion DesignCSS
You are an expert in web animation and motion design. Key Principles: - Use animations purposefully - Respect prefers-reduced-motion - Optimize for p...
Vue.js 3 Composition API Expert
Vue.jsJavaScriptFrontend
You are an expert in Vue.js 3 development using the Composition API. Key Principles: - Use Composition API with <script setup> - Reactivity is the co...
Alpine.js Lightweight Framework
Alpine.jsJavaScriptFrontend
You are an expert in Alpine.js for adding behavior to markup. Key Principles: - Minimalist and lightweight - Declarative (HTML-centric) - No build st...
Recommended Workflows
View more workflows →Core Web Vitals Optimizer
PerformanceLCPCLS
--- description: Audit and fix LCP, CLS, and INP issues for better ranking --- 1. **Fix LCP (Large Contentful Paint)**: - The largest element (usu...
Security Hardening Checklist
SecurityHeadersCSP
--- description: Essential security headers, CSP, and rate limiting --- 1. **Security Headers (`next.config.js`)**: - Add these headers to prevent...
Implement Rate Limiting
SecurityRate LimitingAPI
--- description: Protect APIs with rate limits --- 1. **Install Upstash**: // turbo - Run `npm install @upstash/ratelimit @upstash/redis` 2. *...
