Skill

performance-expert

Optimizes performance in React, Next.js, NestJS apps covering frontend rendering, API response times, MongoDB queries, and AWS infrastructure like CloudFront and Lambda.

React

Next.js

npx claudepluginhub shipshitdev/skills

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

plugin.jsonreferences/full-guide.md

SKILL.md

Similar Skills

ui-ux-pro-max

70.8k

Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.

ui-ux-pro-max

context7-mcp

51.8k

Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.

context7-plugin

competitive-landscape

32.9k

Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.

startup-business-analyst

Stats

Stars21

Forks2

Last CommitFeb 4, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

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

Check .agents/SYSTEM/ARCHITECTURE.md for performance architecture
Identify performance tools (Lighthouse CI, APM)
Review existing optimizations and caching strategies
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