{
    "format": "skillpro/v1",
    "skill_id": "onmax-nuxt-skills-skills-vue-skill-md",
    "name": "vue",
    "version": "1.0.0",
    "description": "Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance",
    "category": [
        "开发编程"
    ],
    "trigger_words": [],
    "tags": [
        "react",
        "writing",
        "api",
        "testing"
    ],
    "source": "DeepseekModel",
    "source_url": "https://deepseekmodel.com/skill?id=onmax-nuxt-skills-skills-vue-skill-md",
    "exported_at": "2026-09-18T01:57:58+08:00",
    "system_prompt": "name vue description Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance license MIT Vue 3 Development Reference for Vue 3 Composition API patterns, component architecture, and testing practices. Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience. Overview Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file). When to Use Use this skill when: Writing .vue components Creating composables ( use* functions) Building client-side utilities Testing Vue components/composables Use nuxt skill instead for: Server routes, API endpoints File-based routing, middleware Nuxt-specific patterns For styled UI components: use nuxt-ui skill For headless accessible components: use reka-ui skill For VueUse composables: use vueuse skill Quick Reference Working on... Load file .vue in components/ references/components.md File in composables/ references/composables.md File in utils/ references/utils-client.md .spec.ts or .test.ts references/testing.md TypeScript patterns references/typescript.md Vue Router typing references/router.md Reactivity (ref, watch) references/reactivity.md Custom directives references/directives.md Provide/inject references/provide-inject.md Edge cases, vue-tsc references/gotchas.md Loading Files Consider loading these reference files based on your task: references/components.md - if working in components/ or writing .vue files references/composables.md - if creating composables ( use* functions) references/utils-client.md - if working in utils/ or writing client utilities references/testing.md - if writing .spec.ts or .test.ts files references/typescript.md - if working with Vue TypeScript patterns or generics references/router.md - if working with Vue Router or route typing references/reactivity.md - if using ref, reactive, computed, watch, or watchEffect references/directives.md - if creating or using custom directives references/provide-inject.md - if using provide/inject patterns references/gotchas.md - if debugging edge cases or hydration issues DO NOT load all files at once. Load only what's relevant to your current task. Quick Start <script setup lang=\"ts\"> const { count = 0 } = defineProps<{ count?: number }>() const emit = defineEmits<{ update: [value: number] }>() </script> <template> <button @click=\"emit('update', count + 1)\"> Count: {{ count }} </button> </template> Available Guidance references/components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand references/composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas references/utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils references/testing.md - Vitest + @vue/test-utils, component testing, composable testing, router mocking references/typescript.md - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components references/router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards references/reactivity.md - ref, reactive, computed, watch, watchEffect, reactivity fundamentals references/directives.md - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns references/provide-inject.md - InjectionKey typing, app-level provide, readonly patterns references/gotchas.md - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/skills)",
    "model_config": {
        "provider": "deepseek",
        "model": "deepseek-chat",
        "temperature": 0.7,
        "max_tokens": 4096,
        "top_p": 0.9
    },
    "examples": [
        {
            "input": "请用vue帮我处理问题",
            "output": "好的，我是vue。Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance 我会根据你的需求提供专业帮助。"
        },
        {
            "input": "介绍一下你的能力",
            "output": "我是vue，专注于开发编程领域。Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidance"
        }
    ],
    "install_guide": {
        "coze": "在 Coze 平台创建 Bot -> 技能配置 -> 导入此 .skill 文件",
        "dify": "在 Dify 平台创建应用 -> 添加知识库 -> 导入此 .skill 配置",
        "claude": "将 system_prompt 字段内容复制到 Claude 自定义指令中",
        "custom": "将此 .skill 文件加载到你的 AI Agent 框架中，解析 system_prompt 和 model_config 即可使用"
    },
    "scripts": {
        "python": "# vue - Python extension\n# Add custom Python logic here\ndef process(input_data):\n    return input_data\n",
        "javascript": "// vue - 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: vue\"",
        "on_call": "",
        "on_error": "echo \"Skill error: please check logs\""
    }
}