開発
#api
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
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=onmax-nuxt-skills-skills-motion-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name motion description 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 license 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 Consider loading these reference files based on your task: references/components.md - if using Motion component, gestures, or layout animations references/composables.md - if using useMotionValue, useScroll, useSpring, or animate() references/examples.md - if looking for animation patterns or inspiration DO NOT load all files at once. Load only what's relevant to your current task. 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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
