How does this skill handle TypeScript integration?

It utilizes the latest Vue 3.3+ and 3.5+ TypeScript features, including type-based defineProps, defineEmits, and the useTemplateRef utility for type-safe DOM access.

What is the recommended SFC block order?

To maintain consistency, the skill enforces an order of first, followed by , and then at the bottom of the file.

Why does this skill recommend ref() over reactive()?

The ref() primitive is preferred because it works with all data types, allows for destructuring without losing reactivity, and maintains a consistent .value access pattern in scripts.

Does this skill support the Vue Options API?

While it can understand Options API, the skill defaults to the Vue 3 Composition API and syntax, as these are the recommended standards for modern Vue development.

Vue 3 Development Expert

Name: Vue 3 Development Expert
Author: xobotyi

byxobotyi

•

개발자 도구

Implements Vue 3 best practices using the Composition API, script setup syntax, and TypeScript for high-performance frontend applications.

The Vue skill for Claude Code provides a specialized framework for building modern web interfaces following official Vue 3 conventions. It prioritizes the Composition API and script setup syntax over the legacy Options API, ensuring code is modular, type-safe, and performant. By enforcing standardized Single-File Component (SFC) structures, efficient reactivity patterns using ref() over reactive(), and robust composable design, this skill helps developers avoid common pitfalls like reactivity loss during destructuring or inefficient watcher implementation. It is an essential companion for refactoring, debugging, or architecting scalable Vue applications with deep TypeScript integration.

주요 기능

01Guides the creation of reusable composables with proper lifecycle management and side-effect cleanup.

02Implements type-safe component patterns for props, emits, and template refs using TypeScript 3.5+ features.

03Standardizes Single-File Component (SFC) organization including block order and logical script sequencing.

044 GitHub stars

05Provides expert guidance on reactivity primitives including ref, shallowRef, and computed stability.

06Enforces Vue 3 Composition API and script setup as the primary development patterns.

사용 사례

01Refactoring legacy Vue 2 or Options API codebases to modern Vue 3 Composition API standards.

02Architecting complex reactive state management systems using custom composables and Provide/Inject.

03Optimizing application performance through strategic use of shallow reactivity and DOM update timing.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xobotyi/cc-foundry vue

For use in Claude.ai and ChatGPT

Download Skill