eva813/vue3-skills
Overview
This skill provides Vue 3 performance optimization and best-practices guidance for modern frontend applications. It prioritizes high-impact rules across reactivity, component design, bundle strategies, and Composition API usage. Use it to guide writing, reviewing, or refactoring Vue 3 code toward efficient, maintainable patterns.
How this skill works
The skill inspects tasks involving Vue 3 components, Composition API, reactivity, state management, and performance hotspots. It maps common code patterns to prioritized rules (e.g., ref vs reactive, async component loading, code-splitting) and recommends concrete changes to reduce runtime work and bundle size. Recommendations focus on measurable impact and practical code changes you can apply immediately.
When to use it
- Creating new Vue 3 components or composables
- Refactoring Vue 2 code to Vue 3 and Composition API
- Reviewing PRs for performance regressions or anti-patterns
- Optimizing bundle size, load time, or hydration behavior
- Working with Pinia/Vuex stores or complex reactive state
Best practices
- Prefer ref for primitives and reactive for objects; use shallowRef for large immutable values
- Lazy-load heavy components with defineAsyncComponent and split routes with dynamic imports
- Favor <script setup> and extract reusable logic into composables to reduce boilerplate
- Use computed properties for cached derivations and minimize unref/unwrapping in hot paths
- Optimize templates: v-memo/v-once for static parts, correct v-for keys, and prefer v-show vs v-if strategically
Example use cases
- Refactor a large dashboard: convert expensive child components to async and cache with keep-alive
- Improve form performance: replace deep reactive patterns with refs and targeted watchers
- Trim bundle size: replace moment.js with day.js and import lodash functions individually
- Migrate Vue 2 options API modules to Composition API using typed composables and auto-imports
- Optimize state stores: normalize complex structures in Pinia and reduce component subscriptions
FAQ
Use ref for primitives and simple values; use reactive for nested objects. Choose shallowRef for large immutable values to avoid deep reactivity overhead.
When is defineAsyncComponent preferable?
Use it for heavy or rarely used components to defer loading and improve initial render times, especially when paired with route-based code splitting.
2 skills
This skill helps you apply Vue 3 performance best practices and Composition API patterns across components and state management.
Comprehensive Vue 3 frontend development skill. Use when developing Vue 3 applications, components, or composables. Covers: (1) Creating new Vue 3 projects and components, (2) Vue 2 to Vue 3 migration, (3) Code review and optimization, (4) Composition API implementation, (5) Best practices and common patterns, (6) TypeScript integration, (7) State management with Pinia, (8) Performance optimization. Includes component templates, composable examples, migration guides, and best practices documentation.
