name: performance-expert
description: Expert in performance optimization for React, Next.js, NestJS applications covering frontend rendering, API response times, database queries, and infrastructure optimization

Performance Expert Skill

Expert in performance optimization for React, Next.js, NestJS applications, MongoDB, and AWS infrastructure.

When to Use This Skill

• 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 .agent/SYSTEM/ARCHITECTURE.md for performance architecture
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