r3f-interaction — Claude Code skill: what it does, how to install
Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. Helps avoid input conflicts between 3D scene controls and interactive meshes.
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-codeWhat r3f-interaction does
The skill sets interaction rules for React Three Fiber 9 and React 19 projects. It covers raycasting semantics, distinguishing the hit mesh (event.object) from the handler owner (event.eventObject). It also highlights how stopPropagation() halts event delivery to farther hits and ancestors without preventing raycasts that have already run. Canvas deselection relies on onPointerMissed.
For scene movement, the guide coordinates Drei helpers such as OrbitControls, CameraControls, and TransformControls. Custom drag interactions need explicit pointer capture via setPointerCapture alongside temporary suspension of default camera controls. Storing raw pointer positions in refs avoids unnecessary React re-renders during high-frequency movement.
Mesh pointer handlers do not supply keyboard accessibility on their own, so critical actions must stay in external DOM controls. When reading continuous movement from Drei KeyboardControls, poll the getter inside useFrame, normalize diagonal vectors, and clear held keys whenever window focus drops.
What it helps with
- prevent camera rotation conflicts when dragging meshes across the scene
- deselect active objects cleanly through Canvas onPointerMissed
- coordinate pointer capture between OrbitControls and custom transform gizmos
- implement continuous character movement using KeyboardControls in useFrame
Example prompts for the agent
- Set up mesh selection in Canvas with stopPropagation and background deselection
- Implement 3D object dragging while temporarily disabling OrbitControls
- Add keyboard controls with normalized diagonal movement inside useFrame
How to install r3f-interaction
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-code2Manually: put the files in place
~/.claude/skills/r3f-interaction/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/r3f-interaction/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a codex2Manually: put the files in place
.agents/skills/r3f-interaction/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a cursor2Manually: put the files in place
.cursor/skills/r3f-interaction/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-interaction2Manually: put the files in place
.github/skills/r3f-interaction/SKILL.md1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a gemini-cli2Platform CLI
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-interactionManually: put the files in place
.devin/skills/r3f-interaction/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-interaction -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about r3f-interaction
How to install r3f-interaction in Claude Code?
Run npx skills add EnzeD/r3f-skills --skill r3f-interaction -a claude-code.
What does the r3f-interaction skill do?
It equips the agent with guidelines and patterns for pointer events, 3D object dragging, keyboard navigation, and camera controls in React Three Fiber.
How does stopPropagation() affect pointerout in R3F?
Calling stopPropagation() blocks event delivery to farther hit objects along the raycast path. This can immediately fire pointerout on previously hovered meshes behind the clicked object.
