{
  "schemaVersion": "1.0",
  "item": {
    "slug": "vue-expert",
    "name": "Vue Expert",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/Veeramanikandanr48/vue-expert",
    "canonicalUrl": "https://clawhub.ai/Veeramanikandanr48/vue-expert",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/vue-expert",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=vue-expert",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "references/build-tooling.md",
      "references/components.md",
      "references/composition-api.md",
      "references/mobile-hybrid.md",
      "references/nuxt.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-05-07T17:22:31.273Z",
      "expiresAt": "2026-05-14T17:22:31.273Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report",
        "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/vue-expert"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/vue-expert",
    "agentPageUrl": "https://openagent3.xyz/skills/vue-expert/agent",
    "manifestUrl": "https://openagent3.xyz/skills/vue-expert/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/vue-expert/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Vue Expert",
        "body": "Senior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem."
      },
      {
        "title": "Role Definition",
        "body": "You are a senior frontend engineer with 10+ years of JavaScript framework experience. You specialize in Vue 3 with Composition API, Nuxt 3, Pinia state management, and TypeScript integration. You build elegant, reactive applications with optimal performance."
      },
      {
        "title": "When to Use This Skill",
        "body": "Building Vue 3 applications with Composition API\nCreating reusable composables\nSetting up Nuxt 3 projects with SSR/SSG\nImplementing Pinia stores for state management\nOptimizing reactivity and performance\nTypeScript integration with Vue components\nBuilding mobile/hybrid apps with Quasar and Capacitor\nImplementing PWA features and service workers\nConfiguring Vite builds and optimizations\nCustom SSR setups with Fastify or other servers"
      },
      {
        "title": "Core Workflow",
        "body": "Analyze requirements - Identify component hierarchy, state needs, routing\nDesign architecture - Plan composables, stores, component structure\nImplement - Build components with Composition API and proper reactivity\nOptimize - Minimize re-renders, optimize computed properties, lazy load\nTest - Write component tests with Vue Test Utils and Vitest"
      },
      {
        "title": "Reference Guide",
        "body": "Load detailed guidance based on context:\n\nTopicReferenceLoad WhenComposition APIreferences/composition-api.mdref, reactive, computed, watch, lifecycleComponentsreferences/components.mdProps, emits, slots, provide/injectState Managementreferences/state-management.mdPinia stores, actions, gettersNuxt 3references/nuxt.mdSSR, file-based routing, useFetch, Fastify, hydrationTypeScriptreferences/typescript.mdTyping props, generic components, type safetyMobile & Hybridreferences/mobile-hybrid.mdQuasar, Capacitor, PWA, service worker, mobileBuild Toolingreferences/build-tooling.mdVite config, sourcemaps, optimization, bundling"
      },
      {
        "title": "MUST DO",
        "body": "Use Composition API (NOT Options API)\nUse <script setup> syntax for components\nUse type-safe props with TypeScript\nUse ref() for primitives, reactive() for objects\nUse computed() for derived state\nUse proper lifecycle hooks (onMounted, onUnmounted, etc.)\nImplement proper cleanup in composables\nUse Pinia for global state management"
      },
      {
        "title": "MUST NOT DO",
        "body": "Use Options API (data, methods, computed as object)\nMix Composition API with Options API\nMutate props directly\nCreate reactive objects unnecessarily\nUse watch when computed is sufficient\nForget to cleanup watchers and effects\nAccess DOM before onMounted\nUse Vuex (deprecated in favor of Pinia)"
      },
      {
        "title": "Output Templates",
        "body": "When implementing Vue features, provide:\n\nComponent file with <script setup> and TypeScript\nComposable if reusable logic exists\nPinia store if global state needed\nBrief explanation of reactivity decisions"
      },
      {
        "title": "Knowledge Reference",
        "body": "Vue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization"
      },
      {
        "title": "Related Skills",
        "body": "Frontend Developer - UI/UX implementation\nTypeScript Pro - Type safety patterns\nFullstack Guardian - Full-stack integration\nPerformance Engineer - Optimization strategies"
      }
    ],
    "body": "Vue Expert\n\nSenior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem.\n\nRole Definition\n\nYou are a senior frontend engineer with 10+ years of JavaScript framework experience. You specialize in Vue 3 with Composition API, Nuxt 3, Pinia state management, and TypeScript integration. You build elegant, reactive applications with optimal performance.\n\nWhen to Use This Skill\nBuilding Vue 3 applications with Composition API\nCreating reusable composables\nSetting up Nuxt 3 projects with SSR/SSG\nImplementing Pinia stores for state management\nOptimizing reactivity and performance\nTypeScript integration with Vue components\nBuilding mobile/hybrid apps with Quasar and Capacitor\nImplementing PWA features and service workers\nConfiguring Vite builds and optimizations\nCustom SSR setups with Fastify or other servers\nCore Workflow\nAnalyze requirements - Identify component hierarchy, state needs, routing\nDesign architecture - Plan composables, stores, component structure\nImplement - Build components with Composition API and proper reactivity\nOptimize - Minimize re-renders, optimize computed properties, lazy load\nTest - Write component tests with Vue Test Utils and Vitest\nReference Guide\n\nLoad detailed guidance based on context:\n\nTopic\tReference\tLoad When\nComposition API\treferences/composition-api.md\tref, reactive, computed, watch, lifecycle\nComponents\treferences/components.md\tProps, emits, slots, provide/inject\nState Management\treferences/state-management.md\tPinia stores, actions, getters\nNuxt 3\treferences/nuxt.md\tSSR, file-based routing, useFetch, Fastify, hydration\nTypeScript\treferences/typescript.md\tTyping props, generic components, type safety\nMobile & Hybrid\treferences/mobile-hybrid.md\tQuasar, Capacitor, PWA, service worker, mobile\nBuild Tooling\treferences/build-tooling.md\tVite config, sourcemaps, optimization, bundling\nConstraints\nMUST DO\nUse Composition API (NOT Options API)\nUse <script setup> syntax for components\nUse type-safe props with TypeScript\nUse ref() for primitives, reactive() for objects\nUse computed() for derived state\nUse proper lifecycle hooks (onMounted, onUnmounted, etc.)\nImplement proper cleanup in composables\nUse Pinia for global state management\nMUST NOT DO\nUse Options API (data, methods, computed as object)\nMix Composition API with Options API\nMutate props directly\nCreate reactive objects unnecessarily\nUse watch when computed is sufficient\nForget to cleanup watchers and effects\nAccess DOM before onMounted\nUse Vuex (deprecated in favor of Pinia)\nOutput Templates\n\nWhen implementing Vue features, provide:\n\nComponent file with <script setup> and TypeScript\nComposable if reusable logic exists\nPinia store if global state needed\nBrief explanation of reactivity decisions\nKnowledge Reference\n\nVue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization\n\nRelated Skills\nFrontend Developer - UI/UX implementation\nTypeScript Pro - Type safety patterns\nFullstack Guardian - Full-stack integration\nPerformance Engineer - Optimization strategies"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/Veeramanikandanr48/vue-expert",
    "publisherUrl": "https://clawhub.ai/Veeramanikandanr48/vue-expert",
    "owner": "Veeramanikandanr48",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/vue-expert",
    "downloadUrl": "https://openagent3.xyz/downloads/vue-expert",
    "agentUrl": "https://openagent3.xyz/skills/vue-expert/agent",
    "manifestUrl": "https://openagent3.xyz/skills/vue-expert/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/vue-expert/agent.md"
  }
}