Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →zebbern/r3f-best-practices
React Three Fiber (R3F) and Poimandres ecosystem best practices.
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
1 fixed21 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
I have a high-frequency continuous animation in `useFrame` that needs to read `targetPosition` from a Zustand store 60 times a second. Using standard React state subscriptions causes unnecessary re-renders. How should I access the Zustand store state inside `useFrame` without triggering React component re-renders?
| Checked | Without skill | With skill |
|---|---|---|
| Calls useGameStore.getState() inside useFrame to read state transiently. | Missed | Passed |
The instructions your model reads when the skill loads.
Comprehensive guide for React Three Fiber and the Poimandres ecosystem. Contains 70+ rules across 12 categories, prioritized by impact.
Additional tips from 100 Three.js Tips by Utsubo
Reference these guidelines when:
| 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- |
test cases passed, vs 21 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.