Vue Expert
Builds Vue 3 components with Composition API patterns, configures Nuxt 3 SSR/SSG...
Install
npx skills add Jeffallan/claude-skills --skill vue-expert -g -a claude-code -y- Repository
- Jeffallan/claude-skills12.2k
- Category
- Writing
- Updated
- 5d ago
- License
- MIT
- Context cost
- Lightabout 876 tokens
- Runs scripts
- No, instructions only
What it does
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.
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 --noEmitfor type errors; verify reactivity with Vue DevTools. If type errors are found: fix each issue and re-runvue-tsc --noEmituntil 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)
