Back to Details

vue-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

skill:vue-expert — Comprehensive Vue.js Application Development

skill:vue-expert — 全方位Vue.js应用开发

Version: 1.0.0

Version: 1.0.0

Purpose

用途

Build full-featured, enterprise-grade Vue.js applications with TypeScript. This skill encompasses the complete Vue.js ecosystem: Composition API with TypeScript, Pinia state management, Vue Router 4, Nuxt 3 full-stack development, Vitest testing, and enterprise patterns (module federation, monorepos, design systems). Use when building TypeScript-based Vue apps, designing component libraries, setting up full-stack Nuxt applications, or establishing enterprise Vue architectures.
使用TypeScript构建功能完整的企业级Vue.js应用。该技能涵盖完整的Vue.js生态系统：结合TypeScript的Composition API、Pinia状态管理、Vue Router 4、Nuxt 3全栈开发、Vitest测试，以及企业级模式（模块联邦、单仓库多项目、设计系统）。适用于构建基于TypeScript的Vue应用、设计组件库、搭建全栈Nuxt应用，或构建企业级Vue架构场景。

File Structure

文件结构

skills/vue-expert/
├── SKILL.md (this file)
└── examples.md
skills/vue-expert/
├── SKILL.md (this file)
└── examples.md

Interface References

接口参考

  • Context: Loaded via ContextProvider Interface
  • Memory: Accessed via MemoryStore Interface
  • Shared Patterns: Shared Loading Patterns
  • Schemas: Validated against context_metadata.schema.json and memory_entry.schema.json
  • Context: 加载自ContextProvider Interface
  • Memory: 通过MemoryStore Interface访问
  • Shared Patterns: Shared Loading Patterns
  • Schemas: 依据context_metadata.schema.json和memory_entry.schema.json进行验证

Mandatory Workflow

强制工作流程

IMPORTANT: Execute ALL steps in order. Do not skip any step.
重要提示：按顺序执行所有步骤，请勿跳过任何步骤。

Step 1: Initial Analysis

步骤1：初始分析

  • Gather inputs: project scope, Vue version, framework (Nuxt 3, Quasar, standalone Vue)
  • Detect TypeScript configuration (strict mode, volar, vue-tsc)
  • Identify Composition API vs Options API usage
  • Detect state management (Pinia, Vuex 4)
  • Identify routing (Vue Router 4, Nuxt file-based routing)
  • Detect build tool (Vite, Nuxt, Webpack)
  • Determine testing framework (Vitest, Jest, Cypress, Playwright)
  • Identify UI library (Vuetify 3, PrimeVue, Radix Vue, Naive UI)
  • Determine monorepo setup (Turborepo, Nx, pnpm workspaces)
  • Determine project name for memory lookup
  • 收集输入信息：项目范围、Vue版本、框架（Nuxt 3、Quasar、独立Vue）
  • 检测TypeScript配置（严格模式、volar、vue-tsc）
  • 识别Composition API与Options API的使用情况
  • 检测状态管理方案（Pinia、Vuex 4）
  • 识别路由方案（Vue Router 4、Nuxt基于文件的路由）
  • 检测构建工具（Vite、Nuxt、Webpack）
  • 确定测试框架（Vitest、Jest、Cypress、Playwright）
  • 识别UI库（Vuetify 3、PrimeVue、Radix Vue、Naive UI）
  • 确定单仓库多项目设置（Turborepo、Nx、pnpm工作区）
  • 确定用于内存查找的项目名称

Step 2: Load Memory

步骤2：加载内存

Follow Standard Memory Loading with 
skill="vue-expert"
and 
domain="engineering"
.
Load per-project memory files if they exist:
  • project_overview.md
    — Vue/Nuxt versions, TypeScript config, key dependencies
  • architecture_patterns.md
    — Module structure, layer architecture, conventions
  • type_patterns.md
    — TypeScript patterns for Vue: generics, prop types, emits
  • testing_patterns.md
    — Testing conventions, mocking strategies, coverage targets
遵循Standard Memory Loading，设置
skill="vue-expert"
和
domain="engineering"
。
加载项目专属内存文件（若存在）：
  • project_overview.md
    — Vue/Nuxt版本、TypeScript配置、核心依赖
  • architecture_patterns.md
    — 模块结构、分层架构、约定规范
  • type_patterns.md
    — Vue相关TypeScript模式：泛型、Prop类型、Emits
  • testing_patterns.md
    — 测试约定、Mock策略、覆盖率目标

Step 3: Load Context

步骤3：加载上下文

Follow Standard Context Loading for the 
engineering
domain. Stay within the file budget declared in frontmatter.
针对
engineering
领域遵循Standard Context Loading，严格遵守前置声明的文件预算。

Step 4: Vue.js Comprehensive Development

步骤4：Vue.js全方位开发

Apply expert-level Vue.js guidance across these dimensions:
  1. TypeScript Integration
    • defineProps<T>()
      with interface/type literal for typed props
    • defineEmits<T>()
      with call-signature syntax
    • defineSlots<T>()
      for typed slots (3.3+)
    • defineModel<T>()
      for typed v-model (3.4+)
    • Generic components with 
      <script setup generic="T">
    • Augmenting global types (ComponentCustomProperties, GlobalComponents)
    • Type-safe provide/inject with InjectionKey
    • Volar and vue-tsc configuration for optimal DX
  2. Advanced Composition API
    • Composable patterns with TypeScript generics
    • effectScope()
      for grouped effect cleanup
    • customRef()
      for debounced/throttled refs
    • toValue()
      utility for MaybeRefOrGetter
    • useTemplateRef<T>()
      for typed template refs (3.5+)
    • Reactivity transform migration (deprecated → alternatives)
    • SSR-compatible composables (isClient checks)
  3. Pinia with TypeScript
    • Typed store definitions (setup stores recommended)
    • Store composition with cross-store typing
    • Plugin typing and middleware patterns
    • HMR and devtools integration
    • Serialization for SSR hydration
    • Testing stores in isolation
  4. Nuxt 3 Full-Stack
    • Server routes with H3/Nitro (defineEventHandler)
    • Type-safe API calls with $fetch and useFetch
    • Server middleware and auth patterns
    • Database integration (Drizzle ORM, Prisma)
    • Nuxt Modules development
    • Deployment targets (Vercel, Cloudflare, Node, static)
    • Nuxt Layers for shared configuration
  5. Enterprise Architecture
    • Module federation with Vite federation plugin
    • Monorepo library architecture (shared packages)
    • Design system development (headless components)
    • Micro-frontend patterns with Vue
    • Feature flags and progressive rollout
    • Internationalization (vue-i18n, @nuxtjs/i18n)
    • Error tracking and monitoring integration
  6. Testing Strategy
    • Vitest: Configuration, component testing with @vue/test-utils
    • Component Testing: Mount options, stubs, mocks, user events
    • E2E Testing: Playwright or Cypress with Vue DevTools
    • Snapshot Testing: Component render snapshots
    • Store Testing: Pinia stores with createTestingPinia
    • API Testing: MSW for server route mocking
    • Test coverage configuration and thresholds
  7. Performance & Optimization
    • Bundle analysis (rollup-plugin-visualizer)
    • Route-level code splitting
    • Component lazy loading and Suspense
    • Image optimization (Nuxt Image, @vueuse/core useImage)
    • SSR/SSG/ISR rendering strategies
    • Edge rendering with Cloudflare Workers
    • Web Vitals monitoring
从以下维度提供专家级Vue.js指导：
  1. TypeScript集成
    • 使用
      defineProps<T>()
      结合接口/类型字面量实现类型化Props
    • 使用带调用签名语法的
      defineEmits<T>()
    • 类型化Slots的
      defineSlots<T>()
      （3.3+版本）
    • 类型化v-model的
      defineModel<T>()
      （3.4+版本）
    • 通过
      <script setup generic="T">
      实现泛型组件
    • 扩展全局类型（ComponentCustomProperties、GlobalComponents）
    • 结合InjectionKey实现类型安全的provide/inject
    • 配置Volar和vue-tsc以优化开发体验
  2. 进阶Composition API
    • 结合TypeScript泛型的Composable模式
    • 使用
      effectScope()
      进行分组式副作用清理
    • 使用
      customRef()
      实现防抖/节流Ref
    • 用于MaybeRefOrGetter的
      toValue()
      工具函数
    • 类型化模板Ref的
      useTemplateRef<T>()
      （3.5+版本）
    • 响应式语法糖迁移（已废弃→替代方案）
    • 兼容SSR的Composable（包含isClient检查）
  3. 结合TypeScript的Pinia
    • 类型化Store定义（推荐使用Setup Stores）
    • 跨Store类型化的Store组合
    • 插件类型化与中间件模式
    • HMR与DevTools集成
    • 用于SSR hydration的序列化
    • 独立测试Store
  4. Nuxt 3全栈开发
    • 基于H3/Nitro的服务端路由（defineEventHandler）
    • 结合$fetch和useFetch的类型安全API调用
    • 服务端中间件与认证模式
    • 数据库集成（Drizzle ORM、Prisma）
    • Nuxt Modules开发
    • 部署目标（Vercel、Cloudflare、Node、静态站点）
    • 用于共享配置的Nuxt Layers
  5. 企业级架构
    • 结合Vite federation插件的模块联邦
    • 单仓库多项目的库架构（共享包）
    • 设计系统开发（无头组件）
    • Vue微前端模式
    • 功能标志与渐进式发布
    • 国际化（vue-i18n、@nuxtjs/i18n）
    • 错误追踪与监控集成
  6. 测试策略
    • Vitest：配置、结合@vue/test-utils的组件测试
    • 组件测试：挂载选项、Stub、Mock、用户事件
    • E2E测试：结合Vue DevTools的Playwright或Cypress
    • 快照测试：组件渲染快照
    • Store测试：结合createTestingPinia的Pinia Store测试
    • API测试：用于服务端路由Mock的MSW
    • 测试覆盖率配置与阈值
  7. 性能与优化
    • 包分析（rollup-plugin-visualizer）
    • 路由级代码分割
    • 组件懒加载与Suspense
    • 图片优化（Nuxt Image、@vueuse/core useImage）
    • SSR/SSG/ISR渲染策略
    • 结合Cloudflare Workers的边缘渲染
    • Web Vitals监控

Step 5: Generate Output

步骤5：生成输出

  • Save output to 
    /claudedocs/vue-expert_{project}_{YYYY-MM-DD}.md
  • Follow naming conventions in 
    ../OUTPUT_CONVENTIONS.md
  • 将输出保存至
    /claudedocs/vue-expert_{project}_{YYYY-MM-DD}.md
  • 遵循
    ../OUTPUT_CONVENTIONS.md
    中的命名规范

Step 6: Update Memory

步骤6：更新内存

Follow Standard Memory Update for 
skill="vue-expert"
. Store any newly learned patterns, conventions, or project insights.
Update per-project memory:
  • project_overview.md: Vue/Nuxt versions, TypeScript config, key libs
  • architecture_patterns.md: Module structure, established conventions
  • type_patterns.md: TypeScript patterns used with Vue
  • testing_patterns.md: Testing setup, conventions, coverage
针对
skill="vue-expert"
遵循Standard Memory Update。存储新学到的模式、约定或项目洞察。
更新项目专属内存：
  • project_overview.md：Vue/Nuxt版本、TypeScript配置、核心库
  • architecture_patterns.md：模块结构、已确立的约定
  • type_patterns.md：Vue相关的TypeScript模式
  • testing_patterns.md：测试设置、约定、覆盖率

Compliance Checklist

合规性检查清单

Before completing, verify:
  • All mandatory workflow steps executed in order
  • Standard Memory Loading pattern followed (Step 2)
  • Standard Context Loading pattern followed (Step 3)
  • Vue version, TypeScript, and framework detected (Step 1)
  • Output saved with standard naming convention
  • Standard Memory Update pattern followed (Step 6)
完成前，请验证：
  • 所有强制工作流程步骤已按顺序执行
  • 遵循标准内存加载模式（步骤2）
  • 遵循标准上下文加载模式（步骤3）
  • 已检测Vue版本、TypeScript及框架（步骤1）
  • 输出已按标准命名规则保存
  • 遵循标准内存更新模式（步骤6）

Version History

版本历史

VersionDateChanges
1.0.02026-02-12Initial release — comprehensive Vue.js with TypeScript
版本日期变更
1.0.02026-02-12初始版本 — 结合TypeScript的全方位Vue.js开发