Vue Best Practices

Vue-best-practices provides a standardized workflow and instruction set for Vue 3 development, emphasizing Composition API with `<script setup>` and TypeScript as the default approach while supporting Options API and JSX when explicitly required by projects. It covers core principles like predictable state management, explicit data flow, component-focused design, and includes required references on reactivity, single-file components, data flow, and composables that developers must apply to every Vue task. The skill is designed for developers working with Vue, .vue files, Vue Router, Pinia, or Vite to ensure consistent, maintainable code architecture from the start.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 7
skills.sh installs: 24.5K
GitHub stars: 2.7K
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add hyf0/vue-skills --skill vue-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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.
Decompose by responsibility: keep each implementation focused and the contracts between implementations explicit.
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.