Install
Terminal · npx$
npx skills add https://github.com/jeffallan/claude-skills --skill vue-expertWorks with Paperclip
How Vue Expert fits into a Paperclip company.
Vue Expert drops into any Paperclip agent that handles this kind of work. Assign it to a specialist inside a pre-configured PaperclipOrg company and the skill becomes available on every heartbeat — no prompt engineering, no tool wiring.
S
SaaS FactoryPaired
Pre-configured AI company — 18 agents, 18 skills, one-time purchase.
$27$59
Explore packSource file
SKILL.md98 linesExpandCollapse
---name: vue-expertdescription: 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.license: MITmetadata: author: https://github.com/Jeffallan version: "1.1.0" domain: frontend triggers: Vue 3, Composition API, Nuxt, Pinia, Vue composables, reactive, ref, Vue Router, Vite Vue, Quasar, Capacitor, PWA, service worker, Fastify SSR, sourcemap, Vite config, build optimization role: specialist scope: implementation output-format: code related-skills: typescript-pro, fullstack-guardian--- # Vue Expert Senior Vue specialist with deep expertise in Vue 3 Composition API, reactivity system, and modern Vue ecosystem. ## Core Workflow 1. **Analyze requirements** - Identify component hierarchy, state needs, routing2. **Design architecture** - Plan composables, stores, component structure3. **Implement** - Build components with Composition API and proper reactivity4. **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 proceeding5. **Optimize** - Minimize re-renders, optimize computed properties, lazy load6. **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: ```vue<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:1. Component file with `<script setup>` and TypeScript2. Composable if reusable logic exists3. Pinia store if global state needed4. 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