How do I install the Vue Performance skill?

Run npx skillmds@latest add kimjinwoo4/vue-performance in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Vue Performance safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Vue Performance?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Vue Performance free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Vue Performance?

KIMJINWOO4 (@kimjinwoo4) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Vue Performance by kimjinwoo4 — Agent Skill

Name: Vue Performance
Author: KIMJINWOO4

Vue Performance

Diagnose and fix Vue 3 performance problems. Profiling workflow (DevTools, render tracking), rendering optimization (shallowRef, v-memo, virtual lists, Vapor Mode), bundle size (code splitting, async components, Rolldown analysis), memory leak hunting. Use when a Vue app is slow, janky, large, or leaking memory — or when reviewing for performance.

KIMJINWOO4 5d80b82 5 files · 14.4 KB Updated Sep 17, 2026

File contents

Vue Performance Skill

Baseline 2026-07: Vue 3.5/3.6, Vite 8 (Rolldown). Rule zero: measure before optimizing — read diagnose first, then jump to the matching fix reference.

Triage Table

Symptom	Likely area	Reference
Slow first load, big JS download	Bundle	bundle
Slow interaction / janky typing / laggy lists	Rendering	rendering
Tab slows down over time, crashes after long use	Memory leaks	memory-leaks
"It feels slow" (unquantified)	Measure first	diagnose

Quick wins checklist (apply before deep work)

shallowRef for large objects/arrays that are replaced, not mutated (API responses).
v-for with stable :keys; computed for filtered lists (never method calls in template).
Virtualize lists > ~200 rows (useVirtualList / vue-virtual-scroller).
Route-level code splitting (() => import(...)) — free with file-based routing.
Heavy below-the-fold widgets → defineAsyncComponent (+ Nuxt: lazy hydration).
Props stability: don't create fresh objects/arrays/closures inline in hot templates.
Watchers: never deep: true on large trees when a getter on the specific field works.
Vue 3.6+: flip profiler-identified hot components to Vapor Mode (see vue skill → vue-36-vapor).

Anti-rules (do NOT)

Do not sprinkle v-memo everywhere — it's for the rare proven-hot v-for case and adds its own comparison cost.
Do not switch working code to markRaw/shallowReactive speculatively; each removes reactivity guarantees someone else relies on.
Do not "optimize" without a before/after number from the profiler or bundle report.

---name: vue-performancedescription: Diagnose and fix Vue 3 performance problems. Profiling workflow (DevTools, render tracking), rendering optimization (shallowRef, v-memo, virtual lists, Vapor Mode), bundle size (code splitting, async components, Rolldown analysis), memory leak hunting. Use when a Vue app is slow, janky, large, or leaking memory — or when reviewing for performance.---# Vue Performance Skill> Baseline 2026-07: Vue 3.5/3.6, Vite 8 (Rolldown). Rule zero: **measure before optimizing** — read [diagnose](references/diagnose.md) first, then jump to the matching fix reference.## Triage Table| Symptom | Likely area | Reference ||---------|------------|-----------|| Slow first load, big JS download | Bundle | [bundle](references/bundle.md) || Slow interaction / janky typing / laggy lists | Rendering | [rendering](references/rendering.md) || Tab slows down over time, crashes after long use | Memory leaks | [memory-leaks](references/memory-leaks.md) || "It feels slow" (unquantified) | Measure first | [diagnose](references/diagnose.md) |## Quick wins checklist (apply before deep work)1. `shallowRef` for large objects/arrays that are replaced, not mutated (API responses).2. `v-for` with stable `:key`s; computed for filtered lists (never method calls in template).3. Virtualize lists > ~200 rows (`useVirtualList` / `vue-virtual-scroller`).4. Route-level code splitting (`() => import(...)`) — free with file-based routing.5. Heavy below-the-fold widgets → `defineAsyncComponent` (+ Nuxt: lazy hydration).6. Props stability: don't create fresh objects/arrays/closures inline in hot templates.7. Watchers: never `deep: true` on large trees when a getter on the specific field works.8. Vue 3.6+: flip profiler-identified hot components to Vapor Mode (see `vue` skill → vue-36-vapor).## Anti-rules (do NOT)- Do not sprinkle `v-memo` everywhere — it's for the rare proven-hot `v-for` case and adds its own comparison cost.- Do not switch working code to `markRaw`/`shallowReactive` speculatively; each removes reactivity guarantees someone else relies on.- Do not "optimize" without a before/after number from the profiler or bundle report.

Frequently asked questions