When should I choose Motion Vue over CSS animations?

Use Motion Vue when you need complex gestures, scroll-linked effects, or layout transitions that are difficult to manage with pure CSS, or when you prefer a declarative JS/TS API.

Can I use this skill with Nuxt 3 projects?

Yes, the skill includes specific setup instructions and modules for Nuxt 3, ensuring seamless integration with Nuxt's module system.

What is Motion Vue (motion-v)?

Motion Vue is a production-ready animation library for Vue 3 and Nuxt, serving as the Vue port of the popular Framer Motion library for React.

How does this skill handle Claude's token limits?

It utilizes a modular loading strategy, directing Claude to reference specific sub-files for components, composables, or examples only when needed to keep the context window efficient.

Does it support complex physics-based animations?

Absolutely. It supports spring physics, stiffness adjustments, and damping to create natural-feeling UI interactions.

Motion Vue Animation

Name: Motion Vue Animation
Author: onmax

byonmax

0•

디자인 도구

Implements production-ready, hardware-accelerated animations and interactive gestures using Motion Vue for Vue 3 and Nuxt applications.

This skill provides Claude with comprehensive guidance and implementation patterns for Motion Vue (motion-v), the Vue 3 port of Framer Motion. It enables the AI to generate declarative animations, complex gesture-based interactions, and scroll-linked effects while maintaining a minimal bundle size. By providing access to specialized component APIs, composables like useScroll, and layout transition best practices, it streamlines the process of building high-performance, polished user interfaces within the Vue ecosystem.

주요 기능

01Declarative component-based animation API for HTML and SVG

020 GitHub stars

03Spring physics and customizable transition configurations

04Automatic layout animations and shared element transitions

05Scroll-linked animations and viewport-triggered effects

06Interactive gesture support for hover, tap, and drag events

사용 사례

01Creating interactive UI components with physics-based hover and tap effects

02Managing complex layout changes and list reordering with smooth transitions

03Implementing scroll-reveal animations to enhance landing page engagement

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add onmax/claude-config motion

For use in Claude.ai and ChatGPT

Download Skill