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

Version: 1.0.0

Purpose

File Structure

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

Mandatory Workflow

IMPORTANT: Execute ALL steps in order. Do not skip any step.

Step 1: Initial Analysis

• 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

Step 2: Load Memory

Follow Standard Memory Loading with

skill="vue-expert"

and

domain="engineering"

.

• 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

Step 3: Load Context

Follow Standard Context Loading for the

engineering

domain. Stay within the file budget declared in frontmatter.

Step 4: Vue.js Comprehensive Development

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

Step 5: Generate Output

• Save output to

  /claudedocs/vue-expert_{project}_{YYYY-MM-DD}.md

• Follow naming conventions in

  ../OUTPUT_CONVENTIONS.md

Step 6: Update Memory

Follow Standard Memory Update for

skill="vue-expert"

. Store any newly learned patterns, conventions, or project insights.

• 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

Compliance Checklist

• 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)

Version History