Agent skill · software engineering · uni-helper
vue-best-practices
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
Why this skill is useful
Provides specific best practices and common pitfalls for Vue 3 development that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-03-01. 94 stars on the source repository.
What this skill does
Vue 3 best practices, common gotchas, and performance optimization. Reactivity Accessing ref() values without .value in scripts → See ref-value-access Destructuring reactive() objects, losing reactivity → See reactive-destructuring Choosing between ref() and reactive() for state → See prefer-ref-over-reactive Accessing refs inside arrays and collections → See refs-in-collections-need-value Large objects or external library data overhead → See shallow-ref-for-performance Using nested refs in template expressions → See template-ref-unwrapping-top-level Comparing reactive objects with === operator → See reactivity-proxy-identity-hazard Library instances breaking in reactive state → See reactivity-markraw-for-non-reactive Expecting watchers to fire for each state change → See reactivity-same-tick-batching Integrating external state management libraries → See reactivity-external-state-integration Tracing unexpected re-renders and state updates → See reactivity-debugging-hooks Deriving state with watchEffect instead of computed → See reactivity-computed-over-watcheffect-mutations Computed Computed getter is making API calls or mutations → See computed-no-side-effects Mutating computed values causes lost changes unexpectedly → See computed-return-value-readonly Computed property doesn't update when expected → See computed-conditional-dependencies Sorting or reversing arrays destroys original data → See computed-array-mutation Expensive operations running too frequently every render → See computed-vs-methods-caching Trying to pass arguments to computed properties → See computed-no-parameters Complex conditions bloating inline class bindings → See computed-properties-for-class-logic Watchers Need to watch a reactive object property → See watch-reactive-property-getter Large nested data structures causing performance issues → See watch-deep-performance Async operations overwriting with stale data → See watch-async-cleanup Creating watchers inside async callbacks → See watch-a …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills uni-helper/vue-best-practices