vue-best-practices
Originally fromhyf0/vue-skills
Installation
Summary
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
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.