vue

Enforce Vue 3.5 Composition API typing, reactivity, and lifecycle patterns.

15|2|Updated May 23, 2026
One-click install
npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill vue-vkirill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/VKirill/antigravity-for-claude-code/tree/main/skills/vue
Command: npx skills add https://github.com/VKirill/antigravity-for-claude-code --skill vue-vkirill

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vue 3.5 developers need a consistent, production-ready way to write Composition API components without common reactivity mistakes, prop/emits/model typing gaps, or lifecycle cleanup bugs.

Core Features & Use Cases

  • Vue 3.5 Composition API patterns: use <script setup lang="ts">, typed defineProps, defineEmits, defineModel, defineSlots, defineExpose, and correct reactivity primitives (ref, reactive, computed, watch, watchEffect).
  • Scalable component architecture: structure state and logic with use* composables, safe template refs via useTemplateRef, and proper cleanup using onUnmounted/onWatcherCleanup.
  • Production integration: Pinia stores (setup-style + storeToRefs), Vue Router 4 (typed routes, guards, lazy loading), and advanced UI APIs (Teleport, Suspense, KeepAlive, directives, plugins).
  • Troubleshooting guardrails: avoids frequent pitfalls like props mutation, reactive destructure loss, and wrong watch timing.

Quick Start

Use the vue skill to implement a Vue 3.5 <script setup lang="ts"> component with typed props, emits, and defineModel, plus a composable for the core logic and cleanup-safe watchers.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure Vue 3.5 components with Composition API and TypeScript?▼

Vue 3.5 components use `<script setup lang="ts">` with typed `defineProps`, `defineEmits`, and `defineModel` for safe state passing. Logic moves into `use*` composables, keeping SFCs scalable while enforcing correct typing and reactivity patterns across typical UI workflows.

Why does reactive props destructure lose reactivity in Vue 3.5?▼

Reactive props destructure loses reactivity when destructured properties are mutated directly instead of using proper Vue 3.5 update events. The Skill prevents these frequent pitfalls by enforcing correct `defineProps` typing and safe reactivity primitive usage patterns.

What is the best way to manage cleanup in Vue 3.5 watchers?▼

Vue 3.5 watchers require proper cleanup using `onWatcherCleanup` or `onUnmounted` to avoid lifecycle bugs. The Skill enforces correct `watch` and `watchEffect` timing alongside safe cleanup patterns for production-ready Composition API components.

Does Vue 3.5 work with Pinia setup stores and Vue Router 4?▼

Vue 3.5 works with Pinia setup-style stores using `storeToRefs` for reactive state extraction and Vue Router 4 for typed routes and lazy loading. The Skill guides production integration across these state management and navigation workflows.

Can I use useTemplateRef for DOM references in Vue 3.5?▼

Vue 3.5 supports `useTemplateRef` for safe template refs in `<script setup>` components. This replaces manual ref assignment, ensuring scalable component architecture and correct reactivity primitive usage within the Composition API.

How do I type defineSlots and defineExpose in Vue 3.5 SFCs?▼

Vue 3.5 SFCs type slots and exposed methods using `defineSlots` and `defineExpose` within `<script setup lang="ts">`. This ensures type-safe component interfaces, preventing prop mutation and emits typing gaps across UI workflows.