agentleFS
Sign inStart free
KIMJINWOO4KIMJINWOO4/vue-skills/skills/vue-performance/SKILL.md

vue-performance

Skill28 starsChanged 31 days agoMITView on GitHub

Diagnose and fix Vue 3 performance problems. Profiling with Vue DevTools and the browser, render tracking, shallowRef, v-memo, list virtualization, Vapor Mode, bundle size with code splitting and Rolldown analysis, and memory leaks. Use when a Vue app is slow, janky, too large or leaking memory, or when reviewing code for performance.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 1

    1. caiqianha/vue-skills★ 2same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository16 other files it gives its agents.

The file

We split this skill into the rules it gives an agent

3 rules. About 0 are common, 2 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Keep props stable in hot lists: no new objects, arrays or closures created inline per render.

    line 28
  2. Very specific:

    Add v-memo everywhere. It is for a proven hot v-for and has its own comparison cost.

    line 40
  3. Distinctive:

    Call something an optimization without a before and after number.

    line 42

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Vue Performance

Versions checked on 2026-10-15: Vue 3.5 (3.6 RC with Vapor Mode), Vite 8.3 with Rolldown.

Measure before changing anything. Read diagnose first, then go to the reference that matches the symptom.

Triage

SymptomAreaReference
Slow first load, large JavaScript downloadBundlebundle
Slow interactions, typing lag, janky listsRenderingrendering
Tab gets slower over time or crashes after long useMemorymemory-leaks
"It feels slow", no numbers yetMeasurementdiagnose

Quick wins to check first

  1. shallowRef for large objects and arrays that are replaced rather than mutated, such as API responses.
  2. Stable :key values in v-for, and computed for filtered lists instead of method calls in the template.
  3. Virtualize lists longer than about 200 rows (useVirtualList, vue-virtual-scroller).
  4. Split code by route; file-based routing does it for free.
  5. Load heavy below-the-fold widgets with defineAsyncComponent, and use lazy hydration in Nuxt.
  6. Keep props stable in hot lists: no new objects, arrays or closures created inline per render.
  7. Watch a getter on the field you need instead of deep: true on a large tree.
  8. On Vue 3.6, move components the profiler flags as hot to Vapor Mode (vue-36-vapor).

Tools

  • Vue DevTools: component render timings, timeline, Pinia state.
  • Browser Performance panel for long tasks and layout work; Memory panel heap snapshots for leaks.
  • Vite DevTools (experimental in Vite 8.3, devtools: true with @vitejs/devtools) for module graph and Rolldown bundle analysis.

Do not

  • Add v-memo everywhere. It is for a proven hot v-for and has its own comparison cost.
  • Switch working code to markRaw or shallowReactive on a guess; both remove guarantees other code relies on.
  • Call something an optimization without a before and after number.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free