Toolingdesign

vue-expert

Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG projects, sets up Pinia stores, scaffolds Quasar/Capacitor mobile apps, implements PWA features, and optimises Vite builds. Use when creating Vue 3 applications with Composition API, writing reusable composables, managing state with Pinia, building hybrid mobile apps with Quasar or Capacitor, configuring service workers, or tuning Vite configuration and TypeScript integration.

jeffallan/claude-skillsjeffallan.github.io

View source

Install

npx skills add https://github.com/jeffallan/claude-skills --skill vue-expert

Use with your agent

Install the vue-expert skill, then use it as build context. Run: npx skills add https://github.com/jeffallan/claude-skills --skill vue-expert. Then read the installed skill.md and follow its guidance to build or refactor my project.

Vue Expert

Senior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem.

Core Workflow

Analyze requirements - Identify component hierarchy, state needs, routing
Design architecture - Plan composables, stores, component structure
Implement - Build components with Composition API and proper reactivity
Validate - Run vue-tsc --noEmit for type errors; verify reactivity with Vue DevTools. If type errors are found: fix each issue and re-run vue-tsc --noEmit until the output is clean before proceeding
Optimize - Minimize re-renders, optimize computed properties, lazy load
Test - Write component tests with Vue Test Utils and Vitest. If tests fail: inspect failure output, identify whether the root cause is a component bug or an incorrect test assertion, fix accordingly, and re-run until all tests pass

Reference Guide

Load detailed guidance based on context:

Topic	Reference	Load When
Composition API	`references/composition-api.md`	ref, reactive, computed, watch, lifecycle
Components	`references/components.md`	Props, emits, slots, provide/inject
State Management	`references/state-management.md`	Pinia stores, actions, getters
Nuxt 3	`references/nuxt.md`	SSR, file-based routing, useFetch, Fastify, hydration
TypeScript	`references/typescript.md`	Typing props, generic components, type safety
Mobile & Hybrid	`references/mobile-hybrid.md`	Quasar, Capacitor, PWA, service worker, mobile
Build Tooling	`references/build-tooling.md`	Vite config, sourcemaps, optimization, bundling

Quick Example

Minimal component demonstrating preferred patterns:

<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{ initialCount?: number }>()

const count = ref(props.initialCount ?? 0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count: {{ count }} (doubled: {{ doubled }})</button>
</template>

Constraints

MUST DO

Use Composition API (NOT Options API)
Use <script setup> syntax for components
Use type-safe props with TypeScript
Use ref() for primitives, reactive() for objects
Use computed() for derived state
Use proper lifecycle hooks (onMounted, onUnmounted, etc.)
Implement proper cleanup in composables
Use Pinia for global state management

MUST NOT DO

Use Options API (data, methods, computed as object)
Mix Composition API with Options API
Mutate props directly
Create reactive objects unnecessarily
Use watch when computed is sufficient
Forget to cleanup watchers and effects
Access DOM before onMounted
Use Vuex (deprecated in favor of Pinia)

Output Templates

When implementing Vue features, provide:

Component file with <script setup> and TypeScript
Composable if reusable logic exists
Pinia store if global state needed
Brief explanation of reactivity decisions

Knowledge Reference

Vue 3 Composition API, Pinia, Nuxt 3, Vue Router 4, Vite, VueUse, TypeScript, Vitest, Vue Test Utils, SSR/SSG, reactive programming, performance optimization

Documentation