How does it handle component cleanup?

The skill enforces strict cleanup of all side effects (timers, listeners, subscriptions) in the onUnmounted lifecycle hook to prevent memory leaks.

Is the syntax required?

Yes, this skill prioritizes the syntax for all new Vue components as it provides better performance and a more concise developer experience.

Can this help with TypeScript integration in Vue?

Absolutely. The skill emphasizes TypeScript-first patterns, including type-safe defineProps, defineEmits, and InjectionKey symbols for dependency injection.

Does this skill support Vue 3.5 features?

Yes, it includes full support for Vue 3.5 additions like useTemplateRef, useId, onWatcherCleanup, and reactive props destructuring.

Should I use ref() or reactive() for my state?

This skill follows the best practice of using ref() for primitives and reassignable values, while using reactive() for objects with nested properties.

Vue 3 Composition API

Name: Vue 3 Composition API
Author: agents-inc

byagents-inc

0•

设计工具

Implement production-grade Vue 3 components using Composition API patterns, script setup syntax, and modern reactivity primitives.

This skill equips Claude with specialized knowledge of Vue 3's Composition API, enabling it to build scalable, maintainable, and type-safe frontend components. It covers the latest Vue 3.4 and 3.5 features, including defineModel, useTemplateRef, and reactive props destructuring, while enforcing best practices like lifecycle cleanup and logic extraction via composables. It is ideal for developers building modern web applications who want to ensure their AI-generated code follows the most current Vue standards, performance patterns, and TypeScript integrations.

主要功能

01Advanced reactivity management using ref, reactive, and computed

02Implementation of reusable stateful logic through the Composable pattern

03Support for modern Vue 3.5 features like useId and onWatcherCleanup

040 GitHub stars

05Type-safe dependency injection patterns using Provide and Inject

06Specialized support for <script setup> syntax and compiler macros

使用场景

01Building complex, reactive UI components with clean logic separation

02Creating custom, reusable Vue composables for shared application logic

03Refactoring legacy Options API components to 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

主要功能

01Advanced reactivity management using ref, reactive, and computed

02Implementation of reusable stateful logic through the Composable pattern

03Support for modern Vue 3.5 features like useId and onWatcherCleanup

040 GitHub stars

05Type-safe dependency injection patterns using Provide and Inject

06Specialized support for <script setup> syntax and compiler macros

使用场景

01Building complex, reactive UI components with clean logic separation

02Creating custom, reusable Vue composables for shared application logic

03Refactoring legacy Options API components to 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