vue-best-practices

SKILL.md

Standard Vue 3 workflow with Composition API, <script setup>, and TypeScript as the default approach.

Requires confirming project architecture upfront and reading core references on reactivity, SFCs, component data flow, and composables before implementation

Enforces minimal source state with ref/reactive, deriving everything possible with computed, and keeping templates declarative

Mandates component splitting when responsibilities exceed one clear purpose, with entry/root and route views kept as thin composition surfaces

Covers optional features (slots, transitions, async components, state management) only when requirements explicitly call for them

Includes a post-functionality performance optimization pass for large lists, static subtrees, and over-abstraction in hot paths

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)