vue-best-practices

SKILL.md

Vue 3 development workflow enforcing Composition API, TypeScript, and focused component architecture.

Requires Composition API with <script setup lang="ts"> as the default approach; load alternative skills for Options API or JSX projects

Mandates reading four core references (reactivity, SFC structure, component data flow, composables) before implementation and keeping them active throughout the task

Enforces component splitting when responsibilities exceed one clear purpose, with explicit rules for entry/root/view components staying thin and feature logic moving into child components and composables

Covers essential foundations: minimal source state with computed derivation, props-down/events-up data flow, template safety, and composable extraction for reusable or side-effect-heavy logic

Defers optional features (slots, transitions, async components, directives, state management) until requirements explicitly call for them, and reserves performance optimization for post-functionality passes

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)