vue

This skill provides a modular reference framework for Vue 3 application development, emphasizing the Composition API and modern reactivity patterns. It organizes documentation into granular files to maintain low token consumption while providing specific syntax for components, composables, and testing. The skill acts as a technical navigator, helping agents apply correct TypeScript configurations, defineModel patterns, and Vitest testing practices without polluting the active context. By partitioning knowledge into distinct domains—such as client-side utilities or Vue Router typing—it ensures that architectural decisions remain consistent with Vue 3.5+ standards. It focuses on clean code structure, reactive state management, and lifecycle hook handling, preventing unnecessary imports while keeping the development environment focused on the immediate task. It is strictly optimized for standalone Vue applications, distinct from full-stack meta-framework requirements.

When to Use This Skill

• •Building reusable components with clear prop and emit interfaces
• •Abstracting logic into composables using VueUse patterns
• •Setting up unit tests for components with mocked router dependencies
• •Refactoring existing options API code to modern composition syntax

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

• “how do I implement defineModel in my Vue component?
• “what is the standard pattern for a Vue composable?
• “guide me through testing a Vue component with Vitest
• “how should I structure my Provide/Inject with TypeScript?
• “explain Vue 3 reactive destructuring

Pro Tips

• 💡Combine this skill with the `vueuse` skill when leveraging common utility composables to ensure optimal integration and pattern adherence.
• 💡For server-side rendering (SSR) or file-based routing contexts, remember to switch to the `nuxt` skill to gain Nuxt-specific insights and prevent context clashes.
• 💡Prioritize loading specific reference files (e.g., `references/composables.md`) based on your current task to minimize token usage and keep the AI's focus sharp.

What this skill does

• •Context-aware documentation loading for Vue components and composables
• •Standardized patterns for reactive destructuring and defineModel usage
• •TypeScript integration guidance for provide/inject and generic components
• •Test suite configuration using Vitest and @vue/test-utils
• •Typed route management for Vue Router

When not to use it

• ✕Server-side rendering logic or backend API route configuration
• ✕Styling UI components that require specific library-bound logic
• ✕General non-Vue web development or framework-agnostic TypeScript tasks

Example workflow

1. Identify if the task involves UI, logic, or testing
2. Load the corresponding reference file for the chosen domain
3. Review the specific syntax patterns for props or lifecycle hooks
4. Apply the code structure to your local .vue or .ts file
5. Run the local test suite using the documented testing patterns

Prerequisites

• –Node.js environment
• –Vue 3.x project setup
• –TypeScript configuration

Pitfalls & limitations

• !Loading multiple reference files simultaneously will deplete context limits
• !Confusing Vue-specific utilities with Nuxt-specific auto-imports
• !Over-engineering simple components by ignoring reactivity performance guidelines

FAQ

How it compares

Unlike generic web development prompts, this skill forces context-sensitive code patterns, preventing common Vue 3 anti-patterns and ensuring type safety in reactive state management.

Source & trust

Recommended Rules

Recommended Workflows

Recommended MCP Servers