Which version of Vue 3 does this skill target?

This skill covers standard Vue 3 patterns and includes specific implementations for Vue 3.4 (defineModel) and Vue 3.5 (useTemplateRef, useId, and reactive props destructuring).

Does it provide guidance on ref vs reactive?

Yes, it provides clear patterns for using ref() for primitives and reassignable values, and reactive() for complex objects, including how to maintain reactivity when destructuring.

How does this skill handle component cleanup?

It enforces the mandatory cleanup of all side effects, such as timers, event listeners, and subscriptions, within the onUnmounted lifecycle hook to prevent memory leaks.

Does this skill support the Vue Options API?

No, this skill is specifically designed for the Vue 3 Composition API and syntax to promote modern best practices and better code organization.

Are the patterns compatible with TypeScript?

Yes, the skill is TypeScript-first, providing patterns for type-safe props, emits, injection keys, and template refs.

Vue 3 Composition API Patterns

Name: Vue 3 Composition API Patterns
Author: agents-inc

byagents-inc

•

Design Tools

Implements modern Vue 3 Composition API patterns and reactivity primitives for scalable frontend development.

This skill provides a standardized framework for building Vue 3 applications using the Composition API and <script setup> syntax. It guides developers through implementing advanced reactivity with ref and reactive, creating reusable stateful logic with composables, and utilizing modern Vue 3.4/3.5 features like defineModel and useTemplateRef. By enforcing strict lifecycle cleanup and TypeScript-first patterns, it ensures the creation of maintainable, performance-optimized components that follow logical organization rather than configuration-based structures.

Key Features

01Advanced reactivity management using ref, reactive, and computed

02Implementation of Vue 3.5+ features like useTemplateRef and onWatcherCleanup

031 GitHub stars

04Reusable logic extraction through the composables (use*) pattern

05Enforced side-effect cleanup and lifecycle management best practices

06Standardized <script setup> syntax with TypeScript integration

Use Cases

01Building complex, highly reactive frontend components in Vue 3

02Migrating legacy Options API components to modern Composition API structures

03Developing type-safe, shared composables for application-wide logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-framework-vue-composition-api

For use in Claude.ai and ChatGPT

Key Features

01Advanced reactivity management using ref, reactive, and computed

02Implementation of Vue 3.5+ features like useTemplateRef and onWatcherCleanup

031 GitHub stars

04Reusable logic extraction through the composables (use*) pattern

05Enforced side-effect cleanup and lifecycle management best practices

06Standardized <script setup> syntax with TypeScript integration

Use Cases

01Building complex, highly reactive frontend components in Vue 3

02Migrating legacy Options API components to modern Composition API structures

03Developing type-safe, shared composables for application-wide logic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-framework-vue-composition-api

For use in Claude.ai and ChatGPT