Is TypeScript required to use this skill?

While it strongly encourages TypeScript for type-safe interfaces and generic macros, the core patterns for the Composition API are applicable to standard JavaScript projects as well.

How does it handle two-way data binding?

It utilizes the defineModel() macro introduced in Vue 3.4, which significantly reduces boilerplate compared to the traditional props and emits approach.

How are component side effects managed?

The skill enforces a strict cleanup policy where all timers, event listeners, and subscriptions must be disposed of within the onUnmounted lifecycle hook to prevent memory leaks.

Does this skill support the latest Vue 3.5 features?

Yes, it includes comprehensive support for Vue 3.5 features such as useTemplateRef, useId, onWatcherCleanup, and reactive props destructuring.

Should I use ref or reactive for my state?

The skill follows the convention of using ref() for primitives and reassignable values, and reactive() for objects with nested properties, ensuring proper reactivity tracking.

Vue 3 Composition API Expert

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

byagents-inc

0•

디자인 도구

Implements modern Vue 3 components using the Composition API, script setup syntax, and reactive design patterns.

This skill provides specialized guidance for building high-quality Vue 3 applications using the Composition API. It focuses on the latest framework standards including <script setup>, the composables pattern, and TypeScript integration. It ensures best practices for reactivity using ref and reactive primitives, manages lifecycle side effects with automated cleanup patterns, and supports advanced features from Vue 3.4 and 3.5 like defineModel, useTemplateRef, and onWatcherCleanup. This skill is essential for developers looking to maintain a clean, performant, and type-safe Vue codebase while leveraging the full power of modern agent-assisted development.

주요 기능

01Support for Vue 3.5+ features like useTemplateRef, useId, and reactive destructuring

02Strict enforcement of <script setup> and composable-based architecture

030 GitHub stars

04Standardized lifecycle management and side-effect cleanup patterns

05Type-safe prop and emit definitions using TypeScript generics

06Two-way binding optimization using the defineModel macro

사용 사례

01Building reusable stateful logic through custom Vue composables

02Developing accessible, type-safe form systems with unique IDs and two-way bindings

03Refactoring legacy Options API components to the modern Composition API

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

주요 기능

01Support for Vue 3.5+ features like useTemplateRef, useId, and reactive destructuring

02Strict enforcement of <script setup> and composable-based architecture

030 GitHub stars

04Standardized lifecycle management and side-effect cleanup patterns

05Type-safe prop and emit definitions using TypeScript generics

06Two-way binding optimization using the defineModel macro

사용 사례

01Building reusable stateful logic through custom Vue composables

02Developing accessible, type-safe form systems with unique IDs and two-way bindings

03Refactoring legacy Options API components to the modern Composition API

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