{
    "format": "skillpro/v1",
    "skill_id": "onmax-nuxt-skills-skills-motion-skill-md",
    "name": "motion",
    "version": "1.0.0",
    "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",
    "category": [
        "开发编程"
    ],
    "trigger_words": [],
    "tags": [
        "api"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=onmax-nuxt-skills-skills-motion-skill-md",
    "exported_at": "2026-09-16T20:33:15+08:00",
    "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",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用motion帮我处理问题",
            "output": "好的，我是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 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是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"
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# motion - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// motion - JavaScript extension\n// Add custom JS logic here\nfunction process(inputData) {\n    return inputData;\n}\n"
    },
    "tools": {
        "mcp_servers": [],
        "api_endpoints": []
    },
    "dependencies": {
        "python": [],
        "node": []
    },
    "hooks": {
        "on_load": "echo \"Skill loaded: motion\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}