# R3f Best Practices

React Three Fiber (R3F) and Poimandres ecosystem best practices.

- Repository: https://github.com/zebbern/claude-code-guide (4691 stars)
- Category: Writing
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add zebbern/claude-code-guide --skill r3f-best-practices -g -a claude-code -y`
Codex: `npx skills add zebbern/claude-code-guide --skill r3f-best-practices -g -a codex -y`
Cursor: `npx skills add zebbern/claude-code-guide --skill r3f-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add zebbern/claude-code-guide --skill r3f-best-practices -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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](https://www.utsubo.com/blog/threejs-best-practices-100-tips) by [Utsubo](https://www.utsubo.com)

## 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)

The rest: https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/r3f-best-practices/SKILL.md