vue-best-practiceslisted

# 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) - Before implementing any Vue task, make sure to read and apply these core references: - `references/reactivity.md` - `references/sfc.md` - `references/component-data-flow.md` - `references/composables.md` - Keep these references in active working context for the entire task, not only when a specific issue appears. ### 1.2 Plan component boundaries before coding (required) Create a brief component map before implementation for any non-trivial feature. - Define each component's single responsibility in one sentence. - Keep entry/root and route-level view components as composition sur