motion

Add Vue and Nuxt animation guidance for motion components and gestures.

Updated Apr 30, 2026

Search Tags:#vue #animation #motion #nuxt #gestures #scroll effects #layout transitions

Ready to run

npx skills add https://github.com/Guibibi/budgetpulse --skill motion-guibibi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion
Source: https://github.com/Guibibi/budgetpulse/tree/main/.agents/skills/motion
Command: npx skills add https://github.com/Guibibi/budgetpulse --skill motion-guibibi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you add polished, production-ready animations to Vue 3 and Nuxt apps without hand-coding low-level animation logic.

Core Features & Use Cases

Declarative motion components: Animate HTML and SVG elements with initial, animate, exit, and transition states.
Interactive gesture effects: Build hover, tap, drag, and focus reactions for buttons, cards, menus, and other UI elements.
Scroll and layout animation: Create viewport-triggered reveals, scroll-linked effects, shared element transitions, and responsive layout changes.
Use case: Use it to turn a static dashboard, landing page, or mobile interface into a more engaging experience with smooth microinteractions and page transitions.

Quick Start

Use the motion skill to add a simple Vue animation for a component that fades in and scales up on mount.

Frequently Asked Questions about motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add Vue animations for scroll-linked effects and layout transitions?▼

Vue animations for scroll-linked effects and layout transitions are added using declarative motion components and composable APIs. You configure viewport-triggered reveals and shared element transitions to achieve smooth, performant UI behavior.

What is the best way to build gesture interactions like drag and hover in a Nuxt app?▼

Gesture interactions like drag and hover in a Nuxt app are built using motion-v patterns. These declarative components define interactive reactions for buttons and cards without hand-coding low-level animation logic.

Can I use declarative motion components for enter and exit states in Vue 3?▼

Declarative motion components support enter and exit states in Vue 3 by defining initial, animate, and exit properties. This approach animates HTML and SVG elements directly without manual low-level logic.

Does the motion skill require specific dependencies for production-ready Vue animations?▼

The motion skill requires no external dependencies to generate production-ready Vue animations. It provides composable APIs and transition configuration patterns directly applicable to your UI building tasks.

Why use composable APIs for accessible animations instead of CSS transitions?▼

Composable APIs provide accessible animations with complex gesture interactions and viewport-triggered motion behavior that CSS transitions cannot easily handle. They enable performant layout transitions and shared element animations declaratively.