Agent skill
Optimize Performance
OPTIMIZE slow Vue applications, fix memory leaks, and improve render performance. Reduce unnecessary re-renders, optimize computed properties, and fix expensive operations. Use when application feels slow, memory usage grows, or animations lag.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/dev-optimize-performance
SKILL.md
Optimize Performance
Instructions
Performance Optimization Protocol
When Vue applications are slow or memory usage is high, systematically optimize:
1. Render Performance Issues
- Identify expensive components using Vue DevTools performance tab
- Add
v-memofor heavy components that don't need frequent updates - Use
shallowReffor large arrays/objects that don't need deep reactivity - Optimize computed properties to avoid unnecessary recalculations
2. Memory Leak Detection
- Check for unmanaged event listeners in onUnmounted()
- Cleanup store subscriptions and async operations
- Debug timer/interval cleanup
- Monitor component reference cycles
3. Bundle Size Optimization
- Lazy load components and routes
- Tree shake unused imports
- Optimize asset loading with code splitting
Quick Performance Fixes
Component Memoization
<template>
<!-- Memoize expensive components -->
<ExpensiveComponent
v-for="item in items"
:key="item.id"
v-memo="[item.id, item.lastModified]"
:data="item"
/>
</template>
<script setup>
import { shallowRef } from 'vue'
// Use shallowRef for large data structures
const items = shallowRef([])
</script>
Computed Property Optimization
// ❌ BAD: Expensive recalculation
const expensiveComputed = computed(() => {
return heavyCalculation(props.data)
})
// ✅ GOOD: Memoize with caching
const expensiveComputed = computed(() => {
if (!dataCache.has(props.data.id)) {
dataCache.set(props.data.id, heavyCalculation(props.data))
}
return dataCache.get(props.data.id)
})
Memory Leak Detection
const memoryTracker = {
components: new Set(),
subscriptions: new Set(),
track(component, name) {
this.components.add({ component, name, createdAt: Date.now() })
onUnmounted(() => {
this.components.delete(component)
console.log(`✅ Component cleaned up: ${name}`)
})
},
checkLeaks() {
const now = Date.now()
const leaked = Array.from(this.components).filter(c =>
now - c.createdAt > 30000 // Older than 30 seconds
)
if (leaked.length > 0) {
console.warn('🚨 Potential memory leaks:', leaked)
}
}
}
This skill activates when you mention performance issues, slow applications, memory leaks, or optimization needs.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?