Claude MarketplacesSubmit
emalorenzo avatar

R3f Best Practices

emalorenzo/three-agent-skills

If you're building with React Three Fiber, you're probably fighting re-renders. This is a battle-tested reference covering 70+ rules across the entire Poimandres ecosystem: fiber, drei, zustand, rapier, postprocessing. The priorities are right. Performance and useFrame patterns come first because that's where most developers hurt themselves, like calling setState in useFrame and tanking to single-digit FPS. The Zustand selector patterns alone will save you hours of debugging why your scene stutters. It's comprehensive without being academic, organized by impact rather than alphabetically, and includes the specific anti-patterns that actually show up in production code. Worth having loaded when you're optimizing or reviewing R3F projects.

skills.sh installs
1.6K
GitHub stars
68
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add emalorenzo/three-agent-skills --skill r3f-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/emalorenzo/three-agent-skills
Categories
Frontend Development, Documentation, AI & Agent Building, Go
First seen
May 16, 2026

More from emalorenzo/three-agent-skills

All 2

Recommended

More Frontend Development
1capawesome-team avatarionic-expertcapawesome-team/skillsA comprehensive starting point for AI agents to work with the Ionic Framework. Covers core concepts, components, CLI, theming, layout, lifecycle, navigation, an1.6Kskills.sh installs
2capawesome-team avatarionic-app-developmentcapawesome-team/skillsGuides the agent through general Ionic Framework development including core concepts, component reference, CLI usage, layout, theming, animations, gestures, dev1.6Kskills.sh installs
3adobe avatarpage-importadobe/skillsImport a single webpage from any URL into canonical EDS block format — structured HTML that authors edit in DA. Scrapes the page, analyzes structure, maps to ex1.6Kskills.sh installs
4adobe avatarpreview-importadobe/skillsUse this when you need to preview and verify content you imported into a local AEM Edge Delivery Services (EDS, Franklin, Helix) dev server on localhost. Starts1.6Kskills.sh installs
5ehmo avatarweb-design-guidelinesehmo/platform-design-skillsWeb platform design and accessibility guidelines. Use when building web interfaces, auditing accessibility, implementing responsive layouts, or reviewing web UI1.6Kskills.sh installs
6capawesome-team avatarcapacitor-app-developmentcapawesome-team/skillsGuides the agent through general Capacitor app development topics. Covers core concepts (native bridge, plugins, web layer), Capacitor CLI usage, app configurat1.6Kskills.sh installs