How does this skill handle state management?

It provides best practices for Pinia and guidance on integrating external state libraries while maintaining Vue's reactivity benefits.

Can I use this with Options API projects?

Yes, though the skill will prioritize Composition API patterns unless your project specifically mandates the Options API.

Is TypeScript integration covered?

Absolutely. The skill treats TypeScript as a first-class citizen, offering patterns for defineProps, defineEmits, and Volar-compatible code.

Does this skill support Vue 2?

While it provides guidance on migrating from Vue 2, the skill is primarily optimized for Vue 3 standards, specifically focusing on the Composition API.

Does it include performance optimization techniques?

Yes, it covers advanced topics like shallowRef for large datasets, watcher flush timing, and avoiding side effects in computed properties.

Vue.js Best Practices

Name: Vue.js Best Practices
Author: pleaseai

bypleaseai

•

デザインツール

Optimizes Vue.js development by enforcing Composition API standards, TypeScript integration, and modern reactivity patterns.

This skill provides a comprehensive framework for building high-performance Vue 3 applications using the Composition API and <script setup>. It serves as an expert architectural guide that helps developers navigate complex reactivity hazards, optimize computed properties, and implement scalable component patterns. By integrating deep knowledge of the Vue ecosystem—including Pinia, Vite, and SSR—this skill ensures that your code follows production-grade standards while avoiding common pitfalls like reactivity loss, memory leaks, and inefficient watcher execution.

主な機能

01Optimized component design patterns for props, emits, and scoped slots

02Strict enforcement of Vue 3 Composition API and <script setup> patterns

03Performance tuning for SSR, shallow refs, and expensive computed operations

04Deep integration with TypeScript, Volar, and Pinia state management

05Comprehensive troubleshooting for reactivity hazards and proxy identity issues

063 GitHub stars

ユースケース

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

02Debugging complex state synchronization and reactivity issues in large-scale apps

03Architecting reusable composables and high-performance frontend utility functions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pleaseai/claude-code-plugins vue-best-practices

For use in Claude.ai and ChatGPT

Download Skill