Vue Best Practices Workflow

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)