Reference for Vue 3 Composition API, component architecture, and testing best practices.
Install
mkdir -p .claude/skills/vue-valibali && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18786" && unzip -o skill.zip -d .claude/skills/vue-valibali && rm skill.zipInstalls to .claude/skills/vue-valibali
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when editing .vue files, creating Vue 3 components, writing composables, or testing Vue code - provides Composition API patterns, props/emits best practices, VueUse integration, and reactive destructuring guidanceKey capabilities
- →Provide guidance for writing Vue 3 components
- →Assist in creating composables with Composition API
- →Offer best practices for props and emits
- →Guide VueUse integration
- →Support testing Vue components and composables
- →Explain reactivity fundamentals (ref, reactive, computed, watch)
How it works
The skill provides targeted guidance for Vue 3 development by referencing specific documentation files based on the user's task, covering component architecture, reactivity, testing, and TypeScript patterns.
Inputs & outputs
When to use vue
- →Write Vue components
- →Develop composables
- →Implement reactivity
- →Test Vue code
About this skill
Vue 3 Development
Reference for Vue 3 Composition API patterns, component architecture, and testing practices.
Current stable: Vue 3.5+ with enhanced reactivity performance (-56% memory, 10x faster array tracking), new SSR features, and improved developer experience.
Overview
Progressive reference system for Vue 3 projects. Load only files relevant to current task to minimize context usage (~250 tokens base, 500-1500 per sub-file).
When to Use
Use this skill when:
- Writing
.vuecomponents - Creating composables (
use*functions) - Building client-side utilities
- Testing Vue components/composables
Use nuxt skill instead for:
- Server routes, API endpoints
- File-based routing, middleware
- Nuxt-specific patterns
For styled UI components: use nuxt-ui skill
For headless accessible components: use reka-ui skill
For VueUse composables: use vueuse skill
Quick Reference
| Working on... | Load file |
|---|---|
.vue in components/ | references/components.md |
File in composables/ | references/composables.md |
File in utils/ | references/utils-client.md |
.spec.ts or .test.ts | references/testing.md |
| TypeScript patterns | references/typescript.md |
| Vue Router typing | references/router.md |
| Reactivity (ref, watch) | references/reactivity.md |
| Custom directives | references/directives.md |
| Provide/inject | references/provide-inject.md |
| Edge cases, vue-tsc | references/gotchas.md |
Loading Files
Consider loading these reference files based on your task:
- references/components.md - if working in
components/or writing.vuefiles - references/composables.md - if creating composables (
use*functions) - references/utils-client.md - if working in
utils/or writing client utilities - references/testing.md - if writing
.spec.tsor.test.tsfiles - references/typescript.md - if working with Vue TypeScript patterns or generics
- references/router.md - if working with Vue Router or route typing
- references/reactivity.md - if using ref, reactive, computed, watch, or watchEffect
- references/directives.md - if creating or using custom directives
- references/provide-inject.md - if using provide/inject patterns
- references/gotchas.md - if debugging edge cases or hydration issues
DO NOT load all files at once. Load only what's relevant to your current task.
Available Guidance
references/components.md - Props with reactive destructuring, emits patterns, defineModel for v-model, slots shorthand
references/composables.md - Composition API structure, VueUse integration, lifecycle hooks, async patterns, reactivity gotchas
references/utils-client.md - Pure functions, formatters, validators, transformers, when NOT to use utils
references/testing.md - Vitest + @vue/test-utils, component testing, composable testing, router mocking
references/typescript.md - InjectionKey for provide/inject, vue-tsc strict templates, tsconfig settings, generic components
references/router.md - Route meta types, typed params with unplugin-vue-router, scroll behavior, navigation guards
references/reactivity.md - ref, reactive, computed, watch, watchEffect, reactivity fundamentals
references/directives.md - Custom directive hooks, v-focus, v-click-outside, v-tooltip patterns
references/provide-inject.md - InjectionKey typing, app-level provide, readonly patterns
references/gotchas.md - Common gotchas, vue-tsc edge cases, hydration issues, race conditions (from vuejs-ai/skills)
When not to use it
- →For server routes or API endpoints
- →For file-based routing or middleware
- →For Nuxt-specific patterns
Limitations
- →DO NOT load all files at once
- →Requires loading specific reference files based on the task
- →Does not cover Nuxt-specific patterns
How it compares
This skill offers a modular, context-aware reference system for Vue 3, loading only relevant documentation to guide specific development tasks, unlike a general framework overview.
Compared to similar skills
vue side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vue (this skill) | 0 | 5mo | No flags | Intermediate |
| vue-best-practices | 19 | 4mo | No flags | Intermediate |
| vue-testing-best-practices | 5 | 6mo | No flags | Intermediate |
| vue-pages | 1 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by valibali
View all by valibali →You might also like
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
vue-testing-best-practices
vuejs-ai
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
vue-pages
JaguarJack
Generate Vue frontend pages using catch-table for CatchAdmin module with full component features.
pinia
antfu
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.
vue
TerminalSkills
|
vue-debug-guides
vuejs-ai
Vue 3 debugging and error handling for runtime errors, warnings, async failures, and SSR/hydration issues. Use when diagnosing or fixing Vue issues.