Skip to main content
affpapa.org
RU EN
skill CX Codex

r3f-physics — Claude Code skill for React Three Fiber

Guides an AI coding agent through adding Rapier physics to React Three Fiber. Use it for collision-based movement, sensors, forces, and joints.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add EnzeD/r3f-skills --skill r3f-physics -a claude-code
Open on GitHub

What r3f-physics does

The skill covers how to connect Rapier simulation to a React Three Fiber scene. It explains dynamic and fixed bodies, collider choices, impulses and forces, sensor events, joints, and character controllers. It also addresses simulation timing, sleeping bodies, and continuous collision detection.

Check your Fiber, React, and Rapier versions first: Rapier 2 targets Fiber 9 and React 19, while older projects need a compatible package line. Physics loads WASM asynchronously, so examples that use it should be wrapped in Suspense. A simulated mesh should not have its position animated with useFrame; the physics world can overwrite that change.

What it helps with

  • Set up collisions between bodies and surfaces
  • Choose colliders for moving objects and static scenery
  • Apply forces at simulation-aligned points
  • Handle sensor entry and exit events
  • Connect bodies with a joint constraint

Example prompts for the agent

  • Add a falling React Three Fiber body that gets an upward impulse when clicked.
  • Show me how to configure colliders for moving bodies and a fixed floor.
  • Set up Rapier sensor events for objects entering and leaving the sensor.

How to install r3f-physics

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-physics -a claude-code

2Manually: put the files in place

~/.claude/skills/r3f-physics/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/r3f-physics/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about r3f-physics

How do I install r3f-physics in Claude Code?

Run npx skills add EnzeD/r3f-skills --skill r3f-physics -a claude-code. The skill file is installed at ~/.claude/skills/r3f-physics/SKILL.md.

What does r3f-physics do?

It guides an AI agent in adding Rapier physics to React Three Fiber, including bodies, colliders, forces, sensors, and joints.

Which versions does Rapier 2 target?

The skill pairs Rapier 2 with Fiber 9 and React 19. Older projects need a package line compatible with their versions.

Similar skills

Everything for Game dev and 3D: Unity, Unreal, Godot, Blender →
orbit-card heygen-com Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths. CX Codex +1 10,000installs cad earthtojake Builds and edits parametric CAD models, exports STEP, STL, 3MF and GLB, measures geometry, and opens existing files in CAD Viewer. CX Codex +1 14,000installs step-parts earthtojake This skill searches the step.parts catalog for off-the-shelf components and pulls their STEP files, so you stop modeling placeholder geometry. CX Codex +1 11,200installs sdf earthtojake This skill authors and validates SDFormat files for models and worlds, then helps prepare them for simulator handoff. CX Codex +1 10,500installs urdf earthtojake This skill helps create, validate, and debug URDF robot descriptions. Use it when working with links, joints, geometry, meshes, or inertial data. CX Codex +1 10,500installs hatch-pet official openai Creates and packages animated pets and spritesheets for Codex. Use it to turn a character concept, reference image, or brand cues into a pet. CX Codex +1 3,300installs

From the same set6

r3f-interaction Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. Helps avoid input conflicts between 3D scene controls and interactive meshes. CX Codex +1 3,300installs r3f-materials Guides the agent in configuring PBR and transparency in React Three Fiber. Prevents texture color space mistakes and unnecessary GPU overhead. CX Codex +1 1,900installs r3f-geometry Guides an agent through geometry, custom buffers, points, lines, and instancing in React Three Fiber. Useful when shaping objects or reducing draw calls. CX Codex +1 1,900installs r3f-postprocessing A skill that walks the agent through postprocessing in React Three Fiber: glow on chosen meshes, depth of field, SSAO. Useful when the render looks off and you cannot pin down why. CX Codex +1 1,900installs r3f-loaders Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI. CX Codex +1 1,800installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor