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.

by antfu 5.8k GitHub stars MIT Updated Jun 23, 2026
vue-best-practices skill by antfu
vue-best-practices — Frontend skill by antfu

Overview

vue-best-practices is an open-source frontend skill for Claude Code and compatible agents, published by antfu. Its author describes it as: “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…”. The project has 5.8k stars on GitHub and is available under the MIT license. Add it to your setup with `git clone https://github.com/antfu/skills ~/.claude/skills/vue-best-practices`.

What vue-best-practices does

Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.

What’s inside

The SKILL.md for vue-best-practices is organised into these sections:

  • 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

Installation

Add vue-best-practices to your agent with:

git clone https://github.com/antfu/skills ~/.claude/skills/vue-best-practices

Review a skill’s source before installing it — skills can instruct your agent to run commands. This command comes from the skill’s public repository, which is the source of truth for setup steps. New to skills? Read how to install Claude Code skills.

Supported agents

Neither the skill nor its repository names a specific agent. It uses the SKILL.md format, which several agents can load — check the repository for any agent-specific requirements.

License

vue-best-practices is published under the MIT license.

Strengths

  • Clear MIT license — safe to read and adapt within its terms
  • Ships in antfu/skills, an established project with 5,770 GitHub stars

Author

antfu 19 skills in the catalog · GitHub profile ↗
View skills

Topics

Need a skill like this, tailored to your team?Build a custom skill →

Frequently asked questions

What does vue-best-practices 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 vue-best-practices?
Run git clone https://github.com/antfu/skills ~/.claude/skills/vue-best-practices in your agent, then reload your skills. Review the source at https://github.com/antfu/skills before installing.
Is vue-best-practices free to use?
Yes. vue-best-practices is free and open source under the MIT license, so you can read, run, and adapt it within that license's terms.
Where does vue-best-practices come from?
vue-best-practices ships inside antfu/skills, a repository that contains 19 catalogued skills in total. The repository's 5,770 GitHub stars apply to that whole collection, not to this skill on its own.

Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid rendering.

5.8k GitHub stars MIT Updated Jun 23, 2026 Free

Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store patterns in Vue apps.

5.8k GitHub stars MIT Updated Jun 23, 2026 Free

Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

5.8k GitHub stars MIT Updated Jun 23, 2026 Free

Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for multiple formats, or migrating from tsup.

5.8k GitHub stars MIT Updated Jun 23, 2026 Free

UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify.

5.8k GitHub stars MIT Updated Jun 23, 2026 Free