Agent skill · software engineering · aiskillstore
performance-optimization
Full-stack performance analysis, optimization patterns, and monitoring strategies
Why this skill is useful
Adds executable scripts and specific optimization patterns for performance analysis that are not commonly known.
What it needs
Requires @next/bundle-analyzer, lighthouse, vite-bundle-visualizer installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Performance Optimization Skill Comprehensive frameworks for analyzing and optimizing application performance across the entire stack. When to Use Application feels slow or unresponsive Database queries taking too long Frontend bundle size too large API response times exceed targets Core Web Vitals need improvement Preparing for scale or high traffic Performance Targets Core Web Vitals (Frontend) Metric Good Needs Work -------- ------ ------------ LCP (Largest Contentful Paint) < 2.5s < 4s INP (Interaction to Next Paint) < 200ms < 500ms CLS (Cumulative Layout Shift) < 0.1 < 0.25 TTFB (Time to First Byte) < 200ms < 600ms Backend Targets Operation Target ----------- -------- Simple reads < 100ms Complex queries < 500ms Write operations < 200ms Index lookups < 10ms Bottleneck Categories Category Symptoms Tools ---------- ---------- ------- Network High TTFB, slow loading Network tab, WebPageTest Database Slow queries, pool exhaustion EXPLAIN ANALYZE, pgstatstatements CPU High usage, slow compute Profiler, flame graphs Memory Leaks, GC pauses Heap snapshots Rendering Layout thrashing React DevTools, Performance tab Database Optimization Key Patterns 1. Add Missing Indexes - Turn Seq Scan into Index Scan 2. Fix N+1 Queries - Use JOINs or include instead of loops 3. Cursor Pagination - Never load all records 4. Connection Pooling - Manage connection lifecycle Quick Diagnostics See templates/database-optimization.ts for N+1 fixes and pagination patterns Caching Strategy Cache Hierarchy Cache-Aside Pattern See templates/caching-patterns.ts for full implementation Frontend Optimization Bundle Optimization 1. Code Splitting - lazy() for route-based splitting 2. Tree Shaking - Import only what you need 3. Image Optimization - WebP/AVIF, lazy loading, proper sizing Rendering Optimization 1. Memoization - memo(), useCallback(), useMemo() 2. Virtualization - Render only visible items in long lists 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/performance-optimization