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.
npx skills add antfu/skills --skill vue-best-practices --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 issu
- Core Principles
- 1) Confirm architecture before coding (required)
- 1.1 Must-read core references (required)
- 1.2 Plan component boundaries before coding (required)
- 2) Apply essential Vue foundations (required)
- Reactivity
- SFC structure and template safety
- Keep components focused
- Component data flow
- Composables
- 3) Consider optional features only when requirements call for them
- 3.1 Standard optional features
- 3.2 Less-common optional features
- 4) Run performance optimization after behavior is correct
What does the vue-best-practices skill do?
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.
How do I install it?
Run `npx skills add antfu/skills --skill vue-best-practices --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From antfu/skills, a repository with 5,709 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.