vue-best-practices — Skills

What it does

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.

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.

Vue 3 development with Composition API,

Source

Repository: https://github.com/hyf0/vue-skills

vue-best-practices FAQ

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. Keep state predictable: one source of truth, derive everything else. Make data flow explicit: Props down, Events up for most cases.

What does vue-best-practices require?

Slots: parent needs to control child content/layout -> component-slots Use these only when there is explicit product or technical need.

How do I install vue-best-practices?

Run: npx -y skills add https://github.com/hyf0/vue-skills --skill vue-best-practices --agent claude-code — the source lives at github.com/hyf0/vue-skills.

Maintain vue-best-practices?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[![vue-best-practices on getagentictools](https://getagentictools.com/badge/skills/hyf0-vue-skills-vue-best-practices.svg)](https://getagentictools.com/skills/hyf0-vue-skills-vue-best-practices?ref=badge)

npx agentictools info skills/hyf0-vue-skills-vue-best-practices

The second line is the CLI lookup for this page — handy in READMEs and docs.