improve-threejs

Installation
SKILL.md

Improve Three.js

Audits a Three.js or React Three Fiber (R3F) codebase and fixes what hurts most: work that runs every frame, GPU resources that never get disposed, scene-graph objects rebuilt on every render, and visual defects the user can see. React Doctor supplies the machine-verified code scan; this skill supplies the frame-loop judgment and the visual inspection a general React scanner lacks.

The core principle: severity follows the render loop. Code inside useFrame or a requestAnimationFrame callback runs 60 times per second, so a minor inefficiency there outweighs a major one in a settings panel. Rank every finding by where it runs, not by the rule's default severity.

Workflow

Step 1: Recon

Identify the stack before scanning: plain Three.js or R3F, which helper libraries are in use (drei, postprocessing, rapier), and where the render loop lives (useFrame hooks, requestAnimationFrame, the <Canvas frameloop> setting).

Build a hot-path map: every useFrame body, every RAF callback, every pointer-move handler. These files get the strictest review in Step 3.

Step 2: Scan

Run React Doctor read-only to collect structured evidence:

Installs
118
GitHub Stars
14.6K
First Seen
4 days ago
improve-threejs — millionco/react-doctor