performance-expert logo

performance-expert

performance expert

shipshitdev/library122installs24starsDebugging

SKILL.md

Full skill instructions

Performance Expert Skill

When to Use

  • Optimizing React components or Next.js pages
  • Improving API response times
  • Optimizing database queries
  • Analyzing bundle sizes
  • Implementing caching strategies
  • Optimizing images or assets
  • Configuring CDN or caching
  • Reviewing Core Web Vitals

Project Context Discovery

  1. Check .agents/memory/ for performance architecture context (e.g., repo_frontend_design_execution.md, any *performance* or *architecture* files)
  2. Identify performance tools (Lighthouse CI, APM)
  3. Review existing optimizations and caching strategies
  4. Check for [project]-performance-expert skill

Core Performance Principles

Frontend (React/Next.js)

Bundle Optimization: Code splitting, dynamic imports, tree shaking, remove unused deps

React Optimization: useMemo, useCallback, React.memo, virtualization, lazy loading

Next.js: Server Components, SSG, ISR, next/image, font optimization

Assets: WebP images, font subset, CSS minify, Gzip/Brotli

Backend (NestJS)

API Response Times: Target < 200ms (p95), caching, background jobs, connection pooling

Query Optimization: Indexes, projections, pagination, optimized aggregations

Database (MongoDB)

Indexes: On frequently queried fields, compound indexes, monitor usage

Queries: Early $match, projection before expensive ops, sort with indexes

Infrastructure (AWS)

CDN: CloudFront caching, cache headers, edge optimization

Lambda: Cold start optimization, memory allocation, provisioned concurrency

Performance Metrics

Frontend (Core Web Vitals)

  • LCP: < 2.5s
  • FID: < 100ms
  • CLS: < 0.1
  • FCP: < 1.8s

Backend

  • API p50: < 100ms
  • API p95: < 200ms
  • DB Query p95: < 50ms
  • Error Rate: < 0.1%

Quick Checklist

Frontend

  • Bundle size < 200KB initial
  • Code splitting implemented
  • Images optimized and lazy loaded
  • React components memoized

Backend

  • Database queries optimized
  • Indexes created and used
  • Caching implemented
  • Background jobs for heavy operations

For complete React memoization patterns, Next.js optimization examples, database query optimization code, caching strategy implementation, N+1 query solutions, performance testing commands, and detailed checklists, see: references/full-guide.md