Skip to content

SKILL.md

Latest commit

 

History

History
112 lines (79 loc) · 3.08 KB

SKILL.md

File metadata and controls

112 lines (79 loc) · 3.08 KB
name react-performance-audit
description Comprehensive performance audit for React/Next.js projects with monorepo support. Analyzes architecture, build config, bundle size, code splitting, first-screen performance, React optimization, and overseas deployment. Use when: (1) auditing React project performance, (2) optimizing bundle size and loading speed, (3) improving first-screen metrics (FCP/LCP), (4) reviewing code-splitting strategy, (5) checking build configuration.

React Performance Audit

Comprehensive performance analysis for React/Next.js projects, especially monorepo setups.

Quick Start

# Run full audit
bash scripts/audit.sh /path/to/project

# Or use Claude Code for deep analysis
cd /path/to/project && claude --permission-mode bypassPermissions --print "Run the react-performance-audit analysis following references/audit-checklist.md. Generate performance-analysis-report.md with findings."

The script or agent will:

  1. Analyze project structure and dependencies
  2. Check build configuration
  3. Measure bundle sizes
  4. Evaluate code-splitting strategy
  5. Audit first-screen performance
  6. Check React optimizations
  7. Assess overseas deployment readiness
  8. Review PWA configuration (optional)

Output

Report file: performance-analysis-report.md

Contains:

  • Architecture overview
  • Bundle size breakdown
  • Performance metrics (FCP/LCP/TTI)
  • Optimization recommendations (prioritized)
  • Risk warnings
  • Implementation examples

Audit Checklist

See references/audit-checklist.md for the complete audit framework.

Analysis Scripts

  • scripts/audit.sh - Main audit orchestration script
  • scripts/bundle-analyzer.js - Bundle size analysis helper

Advanced Usage

Monorepo Projects

For monorepo structures, specify the target package:

bash scripts/audit.sh /path/to/monorepo --package apps/web

Custom Build Configs

If using non-standard build tools:

bash scripts/audit.sh /path/to/project --bundler rspack

CI Integration

Generate JSON output for CI pipelines:

bash scripts/audit.sh /path/to/project --format json > audit-results.json

Common Findings

Bundle size issues:

  • Large vendor chunks (>500KB)
  • Duplicate dependencies in monorepo
  • Missing tree-shaking

First-screen bottlenecks:

  • Blocking scripts in <head>
  • Missing critical CSS inlining
  • Unoptimized images

Code-splitting gaps:

  • No route-level splitting
  • Missing lazy imports for heavy components
  • Vendor chunk not split properly

React performance:

  • Unnecessary re-renders
  • Missing React.memo/useCallback
  • Large components without optimization

Overseas deployment:

  • No CDN for static assets
  • Missing polyfill strategy
  • Single-region hosting

Integration with Other Tools

  • Lighthouse CI: Run alongside for automated scoring
  • webpack-bundle-analyzer: Visual bundle inspection
  • React DevTools Profiler: Component-level analysis

Note: This skill works best with Claude Code's deep file exploration. For quick checks, use the bash scripts. For comprehensive audits, delegate to Claude Code.