From nuxt-skills
Provides reference for Motion Vue (motion-v) animations: motion components, gesture interactions, scroll-linked effects, layout transitions, composables for Vue 3/Nuxt.
npx claudepluginhub onmax/nuxt-skills --plugin nuxt-skillsThis skill uses the workspace's default tool permissions.
Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
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)
Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).
Use Motion Vue for:
Consider alternatives:
# 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'],
})
| Working on... | Load file |
|---|---|
| Motion component, gestures | references/components.md |
| useMotionValue, useScroll | references/composables.md |
| Animation examples, patterns | references/examples.md |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
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>
<motion.button
:whileHover="{ scale: 1.05 }"
:whilePress="{ scale: 0.95 }"
:transition="{ type: 'spring', stiffness: 400 }"
>
Click me
</motion.button>
<motion.div
:initial="{ opacity: 0 }"
:whileInView="{ opacity: 1 }"
:viewport="{ once: true, margin: '-100px' }"
>
Appears on scroll
</motion.div>
references/components.md - Motion component variants, animation props, gesture props, layout animations, transition configuration
references/composables.md - useMotionValue, useSpring, useTransform, useScroll, useInView, animate()
references/examples.md - External resources, component libraries, animation patterns and inspiration