Agent skill · software engineering · vuejs-ai
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 architectural guidelines and best practices for Vue.js development that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-05-30. 2,762 stars on the source repository.
What this skill does
Vue Best Practices Workflow Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order. Core Principles Keep state predictable: one source of truth, derive everything else. Make data flow explicit: Props down, Events up for most cases. Favor small, focused components: easier to test, reuse, and maintain. Avoid unnecessary re-renders: use computed properties and watchers wisely. Readability counts: write clear, self-documenting code. 1) Confirm architecture before coding (required) Default stack: Vue 3 + Composition API + <script setup lang="ts">. If the project explicitly uses Options API, load vue-options-api-best-practices skill if available. If the project explicitly uses JSX, load vue-jsx-best-practices skill if available. 1.1 Must-read core references (required) Before implementing any Vue task, make sure to read and apply these core references: references/reactivity.md references/sfc.md references/component-data-flow.md references/composables.md Keep these references in active working context for the entire task, not only when a specific issue appears. 1.2 Plan component boundaries before coding (required) Create a brief component map before implementation for any non-trivial feature. Define each component's single responsibility in one sentence. Keep entry/root and route-level view components as composition surfaces by default. Move feature UI and feature logic out of entry/root/view components unless the task is intentionally a tiny single-file demo. Define props/emits contracts for each child component in the map. Prefer a feature folder layout (components/<feature>/..., composables/use<Feature>.ts) when adding more than one component. 2) Apply essential Vue foundations (required) These are essential, must-know foundations. Apply all of them in every Vue task using the core references already loaded in section 1.1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills vuejs-ai/vue-best-practices