Vue Best Practices

by antfu

Vue Best Practices is a Frontend skill for Claude Code, published by antfu in skills.

5.8K stars317 forkson antfu/skillsAdded 2026/08/15Repository updated 2026/06/23

View source on GitHub Download repo ZIP

agent-skillsskills

Install in seconds

Install Vue Best Practices

Copy Vue Best Practices into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/antfu/skills/tree/main/skills/vue-best-practices ~/.claude/skills/vue-best-practices

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/antfu/skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/vue-best-practices/SKILL.md in antfu/skills
Installs to: ~/.claude/skills/vue-best-practices
Collection: One of 19 skills cataloged from this repository
Category: Frontend — 567 skills

What Vue Best Practices does

Vue Best Practices provides a structured workflow for Vue 3 development, enforcing Composition API with `<script setup>` and TypeScript, and covering reactivity, SFC structure, data flow, and composables. Use this skill for any Vue.js, Vue Router, Pinia, or Vite with Vue task to keep components focused and state predictable.

Vue Best Practices is cataloged under Frontend on DirSkills. Vue Best Practices comes from a repository tagged agent-skills and skills.

Documentation

README

Excerpt

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)

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Vue Best Practices

What else does antfu publish alongside Vue Best Practices?
Vue Best Practices is one of 19 skills that DirSkills catalogs from antfu/skills, the repository it ships in. Its siblings there include Antfu Design, Anthony Fu Conventions and Nitro. Each one is a separate skill with its own page in this directory, installs the same way Vue Best Practices does, and is maintained by antfu in that same repository. The rest of the collection is listed on the antfu/skills page.
How does Vue Best Practices compare to other Frontend skills?
Vue Best Practices ranks #141 by stars among the 567 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Vue Best Practices against them. Open each page to compare what they document and how they install.