Agent skill · millionco
improve-threejs
Audit and fix Three.js and React Three Fiber apps for frame-loop performance, GPU memory leaks, scene-graph correctness, and visual defects like z-fighting, shadow acne, wrong color space, and broken resize handling. Uses React Doctor as the scanning engine plus a visual rubric checked against rendered output. Use when the user asks to improve, audit, scan, or clean up a Three.js, R3F, react-three-fiber, drei, or WebGL app, or types `/improve-threejs`.
What it needs
About 5k tokens when loaded.
What this skill does
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: For a regression check after making changes, run with --scope changed and confirm the score did not drop. Step 3: Triage by frame-loop leverage Re-rank the scanner's findings using the hot-path map, then hunt for the Three.js-specific problems the scanner cannot see. Confirm every finding at its file:line before reporting it. HIGH severity, runs every frame or leaks GPU memory: Allocation inside useFrame: new Vector3(), new Color(), or fresh arrays passed to Three.js APIs each frame. Fix: hoist a scratch object to module scope or useMemo, then mutate it in place setState inside useFrame: re-renders the React tree on every frame. Fix: mutate refs directly; reserve state for discrete changes like selection or visibility Missing disposal: geometries, materials, textures, or render targets created imperatively and never disposed. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills millionco/improve-threejs