home / skills / shipshitdev / library / performance-expert

performance-expert skill

Q: What performance targets do you aim for?

Frontend: LCP < 2.5s, FID < 100ms, CLS < 0.1. Backend: API p50 < 100ms, p95 < 200ms, DB query p95 < 50ms.

Q: Do you provide code-level fixes?

Yes. I provide concrete code snippets, Next.js and NestJS patterns, query changes, and configuration recommendations for CDN and AWS.

safe

/bundles/infrastructure/skills/performance-expert

This skill helps you optimize React, Next.js, NestJS applications for frontend, API, and database performance with practical strategies and tooling.

npx playbooks add skill shipshitdev/library --skill performance-expert

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

2.6 KB

---
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 `.agents/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`

Overview

This skill is an expert in performance optimization for React, Next.js, NestJS applications, MongoDB databases, and AWS infrastructure. It identifies bottlenecks across frontend rendering, API latency, database queries, and infrastructure configuration, and provides prioritized, actionable fixes. The goal is measurable improvement in Core Web Vitals, API percentiles, and database response times.

How this skill works

I inspect project architecture, identify available tooling (Lighthouse CI, APMs), and review existing caching and deployment patterns. I analyze bundle composition, component render patterns, server responses, query plans and infrastructure settings, then produce a prioritized remediation plan with concrete code or config changes. I validate results with metrics and testing commands and iterate until targets are met.

When to use it

You need to reduce LCP, FID, or CLS on React/Next.js pages
API endpoints show high p50 or p95 latency
Database queries are slow or causing high CPU on MongoDB
Bundle size or client load time is above targets
You want a caching or CDN strategy for scale

Best practices

Measure first: collect Core Web Vitals, APM traces, and DB explain plans before changing code
Prioritize high-impact fixes: optimize hot paths, large bundles, and slow queries first
Use progressive strategies: code-split, lazy-load, and adopt SSG/ISR where appropriate
Apply caching at multiple layers: CDN, edge, application, and DB results where safe
Optimize queries and indexes before adding more infra; prefer projection, early $match, and compound indexes

Example use cases

Audit a Next.js site to cut initial bundle and improve LCP under 2.5s
Reduce API p95 from 600ms to under 200ms by adding caching and query tuning
Tune MongoDB aggregation pipelines and create indexes to lower DB query p95 below 50ms
Configure CloudFront cache headers and Lambda memory/concurrency to reduce edge latency
Implement React memoization and virtualization to eliminate unnecessary renders and improve FID

FAQ

What performance targets do you aim for?

Frontend: LCP < 2.5s, FID < 100ms, CLS < 0.1. Backend: API p50 < 100ms, p95 < 200ms, DB query p95 < 50ms.

Do you provide code-level fixes?

Yes. I provide concrete code snippets, Next.js and NestJS patterns, query changes, and configuration recommendations for CDN and AWS.