Does this skill support the latest Vue 3.5 features?

Yes, it includes patterns for useTemplateRef, useId, onWatcherCleanup, and reactive props destructuring.

Does it help with side-effect cleanup?

Absolutely. The skill mandates cleaning up all side effects like timers, listeners, and subscriptions within the onUnmounted lifecycle hook to prevent memory leaks.

Is required when using this skill?

Yes, this skill enforces the use of for all new Vue components to ensure consistency, better performance, and cleaner TypeScript integration.

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

The skill recommends ref() for primitives and reassignable values, and reactive() for complex objects with nested properties to maintain clarity and reactivity.

How does it handle logic reuse across components?

It promotes the 'composables' pattern, extracting stateful logic into reusable 'use*' functions that return reactive objects, making logic sharing simple and type-safe.

Vue 3 Composition API

Name: Vue 3 Composition API
Author: agents-inc

byagents-inc

0•

デザインツール

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

This skill provides comprehensive guidance for building Vue 3 applications using the Composition API and <script setup> syntax. It enforces industry best practices for reactivity management using ref and reactive, logic encapsulation via composables, and rigorous lifecycle cleanup. With built-in support for the latest Vue 3.4 and 3.5 features—including defineModel, useTemplateRef, and reactive prop destructuring—this skill ensures your frontend code remains performant, type-safe, and highly maintainable while following modern ESM and TypeScript standards.

主な機能

01Implements advanced Vue 3.5 features like useTemplateRef and useId

020 GitHub stars

03Automates side-effect cleanup and lifecycle hook management

04Enforces best practices for reactivity primitives and computed properties

05Facilitates logic extraction into reusable 'use*' composable functions

06Standardizes Vue 3 components using <script setup> and TypeScript generics

ユースケース

01Migrating legacy Options API components to the modern Composition API

02Creating a library of shared, reactive logic using the composables pattern

03Building complex, stateful Vue 3 components with high maintainability

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

主な機能

01Implements advanced Vue 3.5 features like useTemplateRef and useId

020 GitHub stars

03Automates side-effect cleanup and lifecycle hook management

04Enforces best practices for reactivity primitives and computed properties

05Facilitates logic extraction into reusable 'use*' composable functions

06Standardizes Vue 3 components using <script setup> and TypeScript generics

ユースケース

01Migrating legacy Options API components to the modern Composition API

02Creating a library of shared, reactive logic using the composables pattern

03Building complex, stateful Vue 3 components with high maintainability

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