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.

How does this skill handle logic reuse?

It utilizes the Composable pattern (use* functions), extracting stateful logic into separate functions that return reactive refs, ensuring clean code separation.

Is TypeScript supported for props and emits?

Absolutely. The skill prioritizes TypeScript generics within defineProps and defineEmits for complete type-safety across the component tree.

Does the skill enforce the use of script setup?

Yes, the skill treats as the mandatory standard for all new Vue components to ensure modern performance and readability.

Vue 3 Composition API Patterns

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

byagents-inc

0•

デザインツール

Implements high-performance Vue 3 components using modern Composition API patterns, script setup syntax, and reactive primitives.

This skill equips Claude with specialized knowledge for architecting robust Vue 3 applications. It focuses on the Composition API philosophy, enforcing the use of <script setup> for cleaner component logic and the Composable pattern for modular, reusable state management. The skill covers essential reactivity primitives like ref and reactive, while integrating advanced Vue 3.4 and 3.5 features such as defineModel for seamless two-way binding, useTemplateRef for DOM access, and useId for accessible form elements. It ensures all code follows strict lifecycle cleanup and TypeScript-first practices.

主な機能

01Leverages Vue 3.5+ primitives including useTemplateRef, useId, and onWatcherCleanup

02Encapsulates reusable stateful logic into specialized 'use*' composables

03Enforces strict lifecycle management with automated side-effect cleanup

04Provides type-safe dependency injection patterns using Provide/Inject symbols

05Standardizes component development using <script setup> and TypeScript generics

060 GitHub stars

ユースケース

01Refactoring legacy Options API components into modular Composition API structures

02Building complex, accessible UI forms with unique IDs and two-way data binding

03Creating shared logic libraries for state, observers, and API fetching via composables

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

主な機能

01Leverages Vue 3.5+ primitives including useTemplateRef, useId, and onWatcherCleanup

02Encapsulates reusable stateful logic into specialized 'use*' composables

03Enforces strict lifecycle management with automated side-effect cleanup

04Provides type-safe dependency injection patterns using Provide/Inject symbols

05Standardizes component development using <script setup> and TypeScript generics

060 GitHub stars

ユースケース

01Refactoring legacy Options API components into modular Composition API structures

02Building complex, accessible UI forms with unique IDs and two-way data binding

03Creating shared logic libraries for state, observers, and API fetching via composables