mcpField
M
motion

motion

github.com/onmaxデザイン・UI7232.3k 回インストール今日更新
リポジトリ

motion について

Motion Vue は Vue 3 と Nuxt 向けのアニメーションライブラリです。このスキルは、コンポーネント、コンポーザブル、ジェスチャー、アニメーションパターンのガイドを提供します。

主な機能

  1. 01Motion コンポーネントのガイド
  2. 02ジェスチャーとレイアウトアニメーションの資料
  3. 03コンポーザブルの利用ガイド
  4. 04タスクに応じた資料選択

活用シーン

  1. 01フェード、スライド、拡大縮小の追加
  2. 02ホバー、タップ、ドラッグ操作の実装
  3. 03スクロール連動またはレイアウトアニメーションの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onmax/nuxt-skills --skill motion

インストール後、Claude Code で/motionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
components.md
composables.md
examples.md

詳細

Motion Vue（motion-v）

Vue 3 および Nuxt 向けのアニメーションライブラリです。最小限のバンドルサイズで、本番環境に対応したハードウェアアクセラレーションによるアニメーションを実現します。

現在の安定版： motion-v 1.x - Motion（旧称 Framer Motion）の Vue 移植版

概要

Motion Vue のアニメーションに関する段階的なリファレンスです。現在のタスクに関連するファイルのみを読み込んでください（基本情報は約 200 トークン、サブファイルは 500～1500 トークンです）。

使用する場面

Motion Vue の使用をおすすめする場面：

  • シンプルな宣言的アニメーション（フェード、スライド、スケール）
  • ジェスチャーに基づくインタラクション（ホバー、タップ、ドラッグ）
  • スクロールに連動するアニメーション
  • レイアウトアニメーションと共有要素のトランジション
  • ばね物理を使ったアニメーション

代替手段を検討する場面：

  • GSAP - 複雑なタイムライン、SVG のモーフィング、スクロールでトリガーされるシーケンス
  • @vueuse/motion - よりシンプルな API、機能は少なめで、バンドルサイズも小さい
  • CSS animations - JavaScript を使わないシンプルなトランジション

インストール

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

クイックリファレンス

作業内容読み込むファイル
Motion コンポーネント、ジェスチャーreferences/components.md
useMotionValue、useScrollreferences/composables.md
アニメーションの例、パターンreferences/examples.md

ファイルの読み込み

タスクに応じて、次のリファレンスファイルを読み込んでください：

ファイルを一度にすべて読み込まないでください。 現在のタスクに関連するものだけを読み込んでください。

主な概念

Motion コンポーネント

アニメーション機能を備えた任意の HTML/SVG 要素を描画します：

<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>
ジェスチャーアニメーション
<motion.button
  :whileHover="{ scale: 1.05 }"
  :whilePress="{ scale: 0.95 }"
  :transition="{ type: 'spring', stiffness: 400 }"
>
  Click me
</motion.button>
スクロールアニメーション
<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  Appears on scroll
</motion.div>

利用可能なガイダンス

references/components.md - Motion コンポーネントのバリアント、アニメーション用 props、ジェスチャー用 props、レイアウトアニメーション、トランジションの設定

references/composables.md - useMotionValue、useSpring、useTransform、useScroll、useInView、animate()

references/examples.md - 外部リソース、コンポーネントライブラリ、アニメーションのパターンやアイデア

コメント

Markdown 対応