React Three Fiber (R3F)

What problem does it solve?

This Skill stops React reconciliation from sabotaging React Three Fiber scenes by preventing per-frame state updates, broad store subscriptions, inline prop churn, and blocking asset loads that together crash the target 60fps experience.

Core Features & Use Cases

• Performance-first guidance balances React state and Three.js mutation, ensuring useFrame callbacks mutate refs instead of triggering re-renders and teaching when to keep data in store selectors versus ref mutations.
• Store and asset discipline enforces granular Zustand subscriptions, delta-based animation updates, constant prop references, and Suspense-protected preloads so scenes remain responsive even as complexity grows.
• Audit and testing playbooks direct agents to hunt for setState-in-useFrame bugs, inline object allocations, and missing Suspense wrappers, along with documenting findings in the internal R3F coherence notes before shipping.

Quick Start

Run the R3F coherence audit to chase down setState in useFrame, inline prop allocations, and overly broad selectors before applying ref-based updates.