When should I load this skill?

You should load this skill for any tasks involving .vue files, Vue Router, Pinia, Vite, or general Vue.js architectural decisions.

Is TypeScript supported?

Yes, TypeScript is considered the standard approach for this skill, including support for Volar and vue-tsc patterns.

Does this skill work with Vue 2?

This skill is primarily designed for Vue 3. While it can assist in migrations, it strongly enforces Vue 3 standards like the Composition API and .

How does it handle reactivity issues?

It identifies common pitfalls such as losing reactivity when destructuring reactive objects or incorrect .value access within script blocks.

Vue.js Best Practices

Name: Vue.js Best Practices
Author: markky21

bymarkky21

0•

Design Tools

Implements modern Vue 3 Composition API patterns and performance optimizations for high-quality frontend development.

The Vue Best Practices skill transforms Claude into a specialized Vue.js expert, focusing on the modern Composition API and <script setup> syntax. It provides comprehensive guidance on reactivity management, state handling with Pinia, and performance tuning for Vite-based projects. By identifying common gotchas—such as reactivity loss during destructuring or inefficient watcher usage—it ensures your Vue 3 applications are scalable, type-safe with TypeScript, and optimized for server-side rendering (SSR).

Key Features

01Optimizes component architecture with validated props, emits, and slots

02Provides performance-focused patterns for computed properties and watchers

03Resolves complex reactivity issues including ref() vs reactive() trade-offs

040 GitHub stars

05Enforces Composition API and <script setup> as the primary development standard

06Integrates seamlessly with TypeScript, Volar, and the wider Vite ecosystem

Use Cases

01Debugging performance bottlenecks in complex component trees and large data lists

02Architecting reactive state management systems using Pinia and provide/inject

03Migrating legacy Options API components to clean, modern Composition API code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markky21/claude-skills vue-best-practices

For use in Claude.ai and ChatGPT

Download Skill