When does the skill recommend using ref() vs reactive()?

The skill suggests ref() for primitives and reassignable values, while reactive() is preferred for complex objects with nested properties to maintain deep reactivity.

Does it enforce specific coding conventions?

Yes, it prioritizes the syntax, clean side-effect disposal in onUnmounted, and specific patterns for watching destructured props.

Does this skill support the latest Vue 3.5 features?

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

How does this skill handle component logic reuse?

It implements the Composable pattern, extracting stateful logic into 'use*' functions that return reactive objects, making code easier to test and share.

Vue 3 Composition API

Name: Vue 3 Composition API
Author: agents-inc

byagents-inc

0•

デザインツール

Implements high-performance Vue 3 components using Composition API patterns, reactive primitives, and modern lifecycle management.

This skill equips Claude with specialized knowledge for building modern Vue 3 applications using the Composition API and <script setup> syntax. It enforces industry best practices for state management with ref and reactive, promotes logic reuse through custom composables, and ensures robust lifecycle cleanup to prevent memory leaks. Fully updated for Vue 3.4 and 3.5, the skill integrates modern patterns like defineModel, useTemplateRef, and reactive props destructuring, enabling the rapid development of scalable, type-safe, and maintainable frontend architectures.

主な機能

01Advanced reactivity management using ref, reactive, and computed patterns

020 GitHub stars

03Logic extraction and sharing via custom Composable (use*) functions

04Automated side-effect cleanup and lifecycle hook management

05Integration of Vue 3.5 features including useTemplateRef and onWatcherCleanup

06Expert implementation of <script setup> and TypeScript-first Vue components

ユースケース

01Building complex, stateful UI components with reusable business logic

02Developing type-safe frontend architectures using Vue 3 and TypeScript

03Refactoring legacy Options API components into modern Composition API structures

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 patterns

020 GitHub stars

03Logic extraction and sharing via custom Composable (use*) functions

04Automated side-effect cleanup and lifecycle hook management

05Integration of Vue 3.5 features including useTemplateRef and onWatcherCleanup

06Expert implementation of <script setup> and TypeScript-first Vue components

ユースケース

01Building complex, stateful UI components with reusable business logic

02Developing type-safe frontend architectures using Vue 3 and TypeScript

03Refactoring legacy Options API components into modern Composition API structures

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