skills.rest
Guibibi
GuibibiCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Guibibi/budgetpulse --skill motion-guibibi
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vito1317vito1317

motion

Animate Vue 3 and Nuxt 3 components with declarative Motion Vue.

Community
Intermediate
JhabbigJhabbig

interaction-design

Design UI interaction patterns with accessible timing and reduced-motion support.

Community
Advanced
Ditto190Ditto190

state-management

Organize and synchronize application state across UI components with reusable containers and hooks.

Community
Intermediate
8starlabs8starlabs
130

card-resize

Resize CSS elements with customizable transition effects.

Official
Basic