vue-best-practices
Installation
Summary
Vue 3 development with Composition API, <script setup>, and TypeScript as the standard approach.
- Enforces a structured workflow: confirm architecture, apply core foundations (reactivity, SFC structure, component focus, data flow, composables), then add optional features only when needed
- Requires reading and applying four core references before implementation: reactivity, SFC structure, component data flow, and composables
- Provides explicit component-splitting rules based on responsibility boundaries, with special guidance for entry/root and route-level view components as thin composition surfaces
- Covers optional features (slots, transitions, async components, directives, state management) with dedicated references loaded only when requirements call for them
- Includes a performance optimization pass as a post-functionality step, never before core behavior is verified
SKILL.md
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-practicesskill if available. - If the project explicitly uses JSX, load
vue-jsx-best-practicesskill if available.