vue-composition-api_skill

Overview

This skill is a Vue 3 Composition API expert focused on practical patterns for single-file components and composables. It enforces TypeScript-driven script setup, predictable reactivity primitives, and clear component APIs. Use it to standardize component structure, improve type safety, and reduce reactivity bugs.

How this skill works

The skill inspects component code and recommends Composition API patterns: script setup with TypeScript, appropriate use of ref, reactive, and shallowRef, plus computed properties and watchers. It also validates prop and emit typing, suggests when to expose methods with defineExpose, and checks template refs and lifecycle usage. Suggestions are concrete snippets and best-practice guidance you can apply directly to files.

When to use it

• Building or refactoring Vue single-file components using TypeScript
• Creating or maintaining composables that manage shared reactive state
• Defining typed props and emits for reusable components
• Optimizing performance by choosing shallowRef for large objects
• Implementing derived state and side effects with computed, watch, or watchEffect

Best practices

• Always use <script setup lang="ts"> for component files to leverage type inference and compact syntax
• Use ref() for primitives, reactive() for objects/arrays, and shallowRef() for large non-deep-reactive values
• Prefer computed() for derived state instead of methods to ensure caching and clarity
• Use watch() for explicit dependency reaction and watchEffect() for auto tracking side effects
• Type props and emits with generic defineProps and defineEmits to get compile-time checks
• Only call defineExpose() when a parent truly needs imperative access to child methods

Example use cases

• Refactor an options-api component to script setup with typed props and emits
• Create a composable that returns reactive state with computed getters and watched side effects
• Optimize a large data model by switching it to shallowRef to avoid deep reactivity overhead
• Implement a form component that exposes focus and reset methods via defineExpose
• Use watchEffect to auto-run derived logic that depends on multiple reactive sources