Agent skill · writing content · emalorenzo
r3f-best-practices
React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.
Why this skill is useful
Provides 70+ domain-specific best practices for optimizing React Three Fiber code that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-01-28. 43 stars on the source repository.
What this skill does
React Three Fiber Best Practices Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 70+ rules across 12 categories, prioritized by impact. Sources & Credits Additional tips from 100 Three.js Tips by Utsubo When to Apply Reference these guidelines when: Writing new R3F components Optimizing R3F performance (re-renders are the #1 issue) Using Drei helpers correctly Managing state with Zustand Implementing post-processing or physics Ecosystem Coverage @react-three/fiber - React renderer for Three.js @react-three/drei - Useful helpers and abstractions @react-three/postprocessing - Post-processing effects @react-three/rapier - Physics engine zustand - State management leva - Debug GUI Rule Categories by Priority Priority Category Impact Prefix ---------- ---------- -------- -------- 1 Performance & Re-renders CRITICAL perf- 2 useFrame & Animation CRITICAL frame- 3 Component Patterns HIGH component- 4 Canvas & Setup HIGH canvas- 5 Drei Helpers MEDIUM-HIGH drei- 6 Loading & Suspense MEDIUM-HIGH loading- 7 State Management MEDIUM state- 8 Events & Interaction MEDIUM events- 9 Post-processing MEDIUM postpro- 10 Physics (Rapier) LOW-MEDIUM physics- 11 Leva (Debug GUI) LOW leva- Quick Reference 1. Performance & Re-renders (CRITICAL) perf-never-set-state-in-useframe - NEVER call setState in useFrame perf-isolate-state - Isolate components that need React state perf-zustand-selectors - Use Zustand selectors, not entire store perf-transient-subscriptions - Use transient subscriptions for continuous values perf-memo-components - Memoize expensive components perf-keys-for-lists - Use stable keys for dynamic lists perf-avoid-inline-objects - Avoid creating objects/arrays in JSX perf-dispose-auto - Understand R3F auto-dispose behavior perf-visibility-toggle - Toggle visibility instead of remounting perf-r3f-perf - Use r3f-perf for performance monitoring 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills emalorenzo/r3f-best-practices