Files

admin 07242683bf Add 260+ Claude Code skills from skills.sh

Complete collection of AI agent skills including:
- Frontend Development (Vue, React, Next.js, Three.js)
- Backend Development (NestJS, FastAPI, Node.js)
- Mobile Development (React Native, Expo)
- Testing (E2E, frontend, webapp)
- DevOps (GitHub Actions, CI/CD)
- Marketing (SEO, copywriting, analytics)
- Security (binary analysis, vulnerability scanning)
- And many more...

Synchronized from: https://skills.sh/

Co-Authored-By: Claude <noreply@anthropic.com>

2026-01-23 18:02:28 +00:00

3.1 KiB

Raw Blame History

name, description, license

name	description	license
motion	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	MIT

Motion Vue (motion-v)

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)

Overview

Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).

When to Use

Use Motion Vue for:

Simple declarative animations (fade, slide, scale)
Gesture-based interactions (hover, tap, drag)
Scroll-linked animations
Layout animations and shared element transitions
Spring physics animations

Consider alternatives:

GSAP - Complex timelines, SVG morphing, scroll-triggered sequences
@vueuse/motion - Simpler API, less features, smaller bundle
CSS animations - Simple transitions without JS

Installation

# 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'],
})

Quick Reference

Working on...	Load file
Motion component, gestures	references/components.md
useMotionValue, useScroll	references/composables.md
Animation examples, patterns	references/examples.md

Loading Files

Load one file at a time based on context:

Component animations → references/components.md
Composables, motion values → references/composables.md
Examples, inspiration → references/examples.md

Core Concepts

Motion Component

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>

Gesture Animations

<Motion.button
  :whileHover="{ scale: 1.05 }"
  :whilePress="{ scale: 0.95 }"
  :transition="{ type: 'spring', stiffness: 400 }"
>
  Click me
</Motion.button>

Scroll Animations

<Motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  Appears on scroll
</Motion.div>

Available Guidance

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

3.1 KiB Raw Blame History