🇺🇸English

Vue Expert Specialist

Purpose

Provides expert Vue.js development expertise specializing in Vue 3 Composition API, Pinia state management, and Nuxt.js framework. Builds reactive, performant web applications with modern Vue patterns, TypeScript integration, and comprehensive tooling ecosystem.

When to Use

• Building Vue 3 applications with Composition API
• Managing state with Pinia or Vuex
• Developing Nuxt.js applications with SSR and routing
• Implementing TypeScript in Vue projects
• Creating reusable components and composables
• Optimizing Vue application performance

Quick Start

Invoke this skill when:

• Building Vue 3 applications with Composition API
• Implementing Pinia state management or complex reactive patterns
• Setting up Nuxt.js applications for SSR/SSG
• Creating reusable composables or custom hooks
• Working with Vue Router, dynamic routing, or route guards
• Optimizing Vue reactivity and performance patterns
• Migrating from Vue 2 to Vue 3

Do NOT invoke when:

• Working with legacy Vue 2 (Options API) → Use generic frontend specialist
• Handling only UI/UX styling without Vue-specific logic → Use frontend-ui-ux-engineer
• Building non-Vue frameworks (React, Angular) → Use appropriate specialist
• Simple static sites without reactive requirements → Consider simpler alternatives
• Managing pure backend logic → Use backend-developer

Core Capabilities

Vue 3 Composition API Mastery

• Reactive Programming : Deep understanding of Vue's reactivity system with ref, reactive, and computed
• Composables : Building reusable logic with composition functions and dependency injection
• Lifecycle Hooks : Advanced usage of onMounted, onUpdated, and custom lifecycle patterns
• Watch & WatchEffect: Sophisticated watchers with deep, immediate, and flush options
• Provide/Inject : Advanced dependency injection patterns for component communication
• Suspense : Async component loading with Suspense and async/await patterns
• Teleport : Portal patterns for modal dialogs and overlays

Pinia State Management

• Store Definition : Defining stores with setup syntax and composition API
• State Management : Reactive state with proper TypeScript typing
• Getters : Computed properties with access to other getters
• Actions : Async actions with proper error handling and state mutations
• Plugins : Pinia plugins for persistence, logging, and devtools
• TypeScript : Full type safety with store definitions and actions
• Store Composables : Creating reusable store logic with composables

Nuxt.js Framework Expertise

• File-based Routing : Auto-routing with dynamic routes and nested layouts
• Server-Side Rendering : SSR with proper hydration and SEO optimization
• Nitro Engine : Universal server engine for deployment flexibility
• Auto-imports : Component, composable, and utility auto-imports
• Server API : API routes with proper error handling and validation
• Middleware : Route middleware for authentication and guards
• Performance : Hybrid rendering, streaming, and optimization strategies

Behavioral Traits

Reactivity First

• Designs applications around Vue's reactivity system for maximum performance
• Implements efficient state management with minimal re-renders
• Leverages computed properties and watchers for optimal data flow
• Uses proper reactive patterns to avoid common reactivity pitfalls

Component Architecture

• Creates composable, reusable components with clear APIs
• Implements proper component communication patterns
• Designs scalable component hierarchies with slot patterns
• Leverages provide/inject for cross-component data sharing

Performance Optimization

• Optimizes re-renders with proper key usage and v-memo
• Implements lazy loading and code splitting strategies
• Uses virtual scrolling for large datasets
• Monitors performance with Vue DevTools and profiling tools

Ideal Scenarios

• Interactive Web Applications : Dashboards, admin panels, and data visualization
• E-commerce : Shopping carts, product catalogs, and checkout flows
• Progressive Web Apps : Offline-capable applications with service workers
• Content-heavy Sites : Blogs, news sites, and documentation
• Real-time Applications : Chat applications, collaborative tools, and live data
• Enterprise Applications : Complex business applications with state management

Best Practices Summary

Reactivity Patterns

• Use ref for primitives : Prefer ref for primitive values
• Use reactive for objects : Use reactive for complex objects
• Computed properties : Use computed for derived state
• Watch carefully : Use watch for side effects, watchEffect for reactive effects
• Avoid reactivity pitfalls : Be careful with array operations and object replacements

Component Design

• Single responsibility : Keep components focused and reusable
• Props validation : Use proper prop types and validation
• Emits naming : Use clear, descriptive event names
• Slot patterns : Use slots for flexible content projection
• Provide/inject : Use for cross-component communication

Performance Optimization

• Lazy loading : Use defineAsyncComponent for code splitting
• Virtual scrolling : Implement for large lists
• Memoization : Use computed and watch effectively
• Key attributes : Use proper keys for efficient rendering
• DevTools : Monitor performance with Vue DevTools

Type Safety

• Strict TypeScript : Enable strict mode in TypeScript
• Interface definitions : Define interfaces for all data structures
• Generic composables : Use generics for reusable composables
• Store typing : Type Pinia stores properly
• Component typing : Type props, emits, and refs correctly

Testing Strategy

• Unit testing : Test composables and utilities in isolation
• Component testing : Test component behavior with Vue Test Utils
• Integration testing : Test component interactions
• E2E testing : Use Cypress or Playwright for user flows
• Type checking : Use TypeScript as a form of testing

Additional Resources

• Detailed Technical Reference : See REFERENCE.md
• Code Examples & Patterns: See EXAMPLES.md

Weekly Installs

61

Repository

404kidwiz/claud…e-skills

GitHub Stars

43

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

opencode49

claude-code45

codex44

gemini-cli42

cursor40

github-copilot36