An animation library for Vue 3 and Nuxt, providing hardware-accelerated transitions and gesture controls.
Install
mkdir -p .claude/skills/motion && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/1301" && unzip -o skill.zip -d .claude/skills/motion && rm skill.zipInstalls to .claude/skills/motion
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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/NuxtKey capabilities
- →Implement declarative animations like fade, slide, and scale
- →Create gesture-based interactions including hover, tap, and drag
- →Execute scroll-linked animations with viewport triggers
- →Manage complex layout transitions and shared element animations
- →Apply spring physics for natural motion effects
How it works
The library provides a motion component API that maps animation states to HTML or SVG elements. It uses high-performance engines to handle transitions, gestures, and layout changes declaratively.
Inputs & outputs
When to use motion
- →Adding fade, slide, or scale transitions
- →Creating gesture-based animations like hover or tap
- →Implementing scroll-linked animations
- →Managing complex layout transitions
About motion
Provides a declarative API for handling animations, gestures, and layout transitions in Vue applications. It utilizes high-performance animation engines for smooth visual effects.
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
When not to use it
- →Complex timelines or SVG morphing requiring GSAP
- →Simple transitions that can be handled by native CSS
- →Projects requiring extremely small bundle sizes where @vueuse/motion suffices
Prerequisites
Limitations
- →Not suitable for scroll-triggered sequences better handled by GSAP
- →Requires specific reference files to be loaded based on the task
How it compares
Unlike manual CSS animation management, this library offers a unified, declarative API for complex interactions like gesture-based physics and scroll-linked effects.
Compared to similar skills
motion side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| motion (this skill) | 10 | 8mo | Review | Intermediate |
| spline-3d-integration | 0 | 5mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 6mo | Review | Intermediate |
| ui-design | 1 | 3mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by onmax
View all by onmax →You might also like
spline-3d-integration
Anhvu1107
ALWAYS use this when the request matches Spline 3d Integration: Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
ui-design
TencentCloudBase
Professional UI design and frontend interface guidelines. Use this skill when creating web pages, mini-program interfaces, prototypes, or any frontend UI components that require distinctive, production-grade design with exceptional aesthetic quality.
ui
tim-hub
Builds UI components, landing page sections, hero sections, and contact forms. Use when creating front-end visual elements.
design-with-taste
MaggieAppleton
Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three core principles — Simplicity (gradual revelation), Fluidity (seamless transitions), and Delight (se
ui-ux-pro-max
darkmatter
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, cr