Implements high-performance Vue 3 components using modern Composition API patterns and script setup syntax.
This skill provides Claude with specialized expertise in Vue 3 development, focusing on the Composition API and modern best practices. It enforces the use of <script setup>, clean reactivity primitives, and modular logic through composables. By integrating the latest Vue 3.4+ and 3.5+ features—such as defineModel, useTemplateRef, and onWatcherCleanup—the skill ensures that generated code is efficient, type-safe, and follows industry-standard lifecycle management. It is particularly useful for building scalable frontend architectures where logic reuse and performance optimization are critical.
主な機能
01Optimizes reactivity using ref(), reactive(), and Vue 3.5 reactive props destructuring
021 GitHub stars
03Implements reusable stateful logic through the Composables (use* functions) pattern
04Standardizes component development with <script setup> and TypeScript integration
05Enforces strict lifecycle management and side-effect cleanup in onUnmounted
06Supports advanced features like defineModel for two-way binding and useId for accessibility
ユースケース
01Refactoring legacy Options API components into modular Composition API structures
02Creating complex, shared state logic using type-safe custom composables
03Developing accessible and reactive form systems using modern Vue 3.5 primitives
