Can it fix React re-render cascades?

Yes, it provides strategies to stabilize props and use refs for frame-local values to prevent expensive React reconciliations during animations.

How does this skill handle Three.js performance?

It implements specific tactics like instancing, material merging, and geometry caching to significantly reduce draw calls and GPU overhead.

Does it support mobile performance optimization?

It includes strategies for capping Device Pixel Ratio (DPR) and reducing shadow map complexity to accommodate lower-powered mobile GPUs.

How is success measured using this skill?

Success is verified by comparing 'before and after' metrics such as FPS, draw call counts, and CPU main-thread activity captured through browser traces.

Performance Optimization Playbook

Name: Performance Optimization Playbook
Author: deadronos

bydeadronos

Game Development

Optimizes React and Three.js application performance through a systematic measure-diagnose-fix-verify workflow.

About

This skill provides a structured methodology for diagnosing and resolving performance issues in modern web applications, particularly those utilizing React, React Three Fiber (R3F), and Three.js. It guides Claude through a rigorous cycle of identifying symptoms, capturing baseline metrics via browser performance traces or Three.js stats, and classifying bottlenecks into CPU, GPU, IO, or Memory categories. By implementing surgical fixes—such as reducing draw calls through instancing, optimizing per-frame logic in useFrame hooks, and managing memory leaks—this skill ensures applications achieve stable frame rates and efficient resource utilization.

Key Features

Bottleneck classification for CPU, GPU, IO, and Memory
Evidence-driven workflow (Measure → Diagnose → Fix → Verify)
R3F and Three.js specific optimizations for draw calls and shaders
React rendering optimization and state-to-ref conversion strategies
Automated verification steps to prevent performance regressions
0 GitHub stars

Use Cases

Improving FPS and reducing stuttering in 3D web environments
Reducing bundle size and optimizing loading times for Vite projects
Identifying and resolving memory leaks in textures and geometries

About

Key Features

Bottleneck classification for CPU, GPU, IO, and Memory
Evidence-driven workflow (Measure → Diagnose → Fix → Verify)
R3F and Three.js specific optimizations for draw calls and shaders
React rendering optimization and state-to-ref conversion strategies
Automated verification steps to prevent performance regressions
0 GitHub stars

Use Cases

Improving FPS and reducing stuttering in 3D web environments
Reducing bundle size and optimizing loading times for Vite projects
Identifying and resolving memory leaks in textures and geometries