Does this skill support the latest Vue 3.5 features?

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

What are the rules for using ref vs reactive?

The skill guides you to use ref() for primitives and reassignable values (accessed via .value), and reactive() for complex objects with nested properties.

Does it assist with side-effect management?

Yes, it strictly enforces the cleanup of timers, event listeners, and subscriptions within the onUnmounted hook to prevent memory leaks.

Why does the skill enforce the script setup syntax?

The script setup syntax is the recommended standard for Vue 3, providing better performance, smaller bundle sizes, and a more ergonomic developer experience with TypeScript.

How does it handle logic reuse across components?

It promotes the use of Composables—reusable functions that encapsulate stateful logic—ensuring that code is organized by concern rather than option type.

Vue 3 Composition API

Name: Vue 3 Composition API
Author: agents-inc

byagents-inc

0•

Design Tools

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

This skill provides specialized guidance for building robust Vue 3 applications using the Composition API. It enforces modern best practices such as the script setup syntax, proper cleanup of side effects in onUnmounted, and type-safe component definitions. By leveraging advanced patterns like composables for logic reuse and the latest Vue 3.4/3.5 features—including defineModel, useTemplateRef, and reactive props destructuring—it ensures your codebase remains maintainable, performant, and aligned with official Vue recommendations.

Key Features

01Implements reusable stateful logic through the Composables (use* function) pattern

02Ensures type-safety with TypeScript generics for props, emits, and provide/inject keys

030 GitHub stars

04Supports modern Vue 3.5+ features like useTemplateRef, useId, and onWatcherCleanup

05Standardizes script setup syntax for concise and performant component definitions

06Enforces explicit reactivity using ref and reactive with proper .value handling

Use Cases

01Architecting scalable, data-driven single-page applications with Vue 3

02Migrating legacy Options API components to modern Composition API patterns

03Developing shared libraries of type-safe, reusable logic and UI utilities

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

01Implements reusable stateful logic through the Composables (use* function) pattern

02Ensures type-safety with TypeScript generics for props, emits, and provide/inject keys

030 GitHub stars

04Supports modern Vue 3.5+ features like useTemplateRef, useId, and onWatcherCleanup

05Standardizes script setup syntax for concise and performant component definitions

06Enforces explicit reactivity using ref and reactive with proper .value handling

Use Cases

01Architecting scalable, data-driven single-page applications with Vue 3

02Migrating legacy Options API components to modern Composition API patterns

03Developing shared libraries of type-safe, reusable logic and UI utilities

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