mk:vue-best-practices

What This Skill Does

The deliberate, invoke-only companion to mk:vue. Where mk:vue is the everyday Composition API quick-reference that auto-activates on .vue files, this skill is the opinionated authoring workflow plus a best-practices reviewer you invoke on purpose — for a non-trivial Vue feature, or to review existing Vue code against a rubric.

It does not restate the basics. Foundation topics (reactivity, props/emits, composable naming, Pinia / Pinia Colada / routing) stay owned by mk:vue; this skill carries the deltas and the topics mk:vue does not cover: built-in components, animation techniques, less-common features, and the performance pass.

When to Use

• /mk:vue-best-practices [concern] (explicit).
• "review my Vue code", "Vue best practices", "recommend Vue improvements".
• A non-trivial Vue feature where the full ordered workflow earns its cost — built-in components, animations, optional features, and a measured performance pass.

When NOT to Use

Need	Use this instead
Everyday Vue authoring quick-reference	mk:vue
Design or review Vue test code	mk:vue-testing-best-practices
Generic diff/PR structural review	mk:review
TypeScript fundamentals	mk:typescript
React / Angular	mk:react-patterns / mk:angular
Visual design	mk:frontend-design

Usage

# Review existing Vue code against the best-practices rubric
/mk:vue-best-practices src/features/checkout

# Follow the ordered workflow for a non-trivial feature
/mk:vue-best-practices build a multi-step wizard with transitions

Argument hint: [concern | path | feature description]

Ordered Workflow

Followed in order unless you ask otherwise:

1. Confirm architecture — Vue 3 + Composition API + <script setup lang="ts">; sketch a brief component map for non-trivial features.
2. Apply foundation deltas — reactivity beyond the basics (shallowRef, computed purity, async cleanup), advanced data flow (provide/inject with InjectionKey, imperative refs), SFC structure and template safety, composable organization.
3. Optional features — load only when the requirement exists — built-in components (slots, fallthrough attrs, KeepAlive, Teleport, Suspense, Transition, TransitionGroup), animation techniques, custom directives, async components, render functions, plugins.
4. Performance pass — after behavior is correct — virtualize large lists, v-once/v-memo, avoid over-abstraction in hot paths, the updated hook. Measure with Vue DevTools first.
5. Final self-check — a short rubric over the four steps above.

Review & Recommendations Mode

When asked to review, the skill walks the final self-check as a rubric and emits a structured findings list — one row per finding:

[severity: high|med|low] · path:line · issue · fix

Each finding is grounded in a specific best practice. Foundation-basics findings are deferred to mk:vue; non-Vue structural/security findings to mk:review and the project security rules. The output ends with a one-line verdict: ready / changes recommended / changes required.

Relationship to the Vue Skills

• mk:vue — everyday Composition API quick-reference (auto-activates on .vue).
• mk:vue-best-practices — this skill: deep review + ordered workflow for feature code.
• mk:vue-testing-best-practices — the test-design and test-code counterpart.