skill CX Codex

r3f-geometry — Claude Code skill for React Three Fiber geometry

Q: How do I install r3f-geometry in Claude Code?

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

Q: Does Drei `Merged` combine arbitrary geometry?

No. `Merged` builds instancing abstractions from meshes; it does not join arbitrary `BufferGeometry` objects. For actual merging, the skill points to `mergeGeometries` in `three/addons/utils/BufferGeometryUtils.js`.

Guides an agent through geometry, custom buffers, points, lines, and instancing in React Three Fiber. Useful when shaping objects or reducing draw calls.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

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

Open on GitHub

What r3f-geometry does

The skill explains when JSX geometry is enough and when to use BufferGeometry, point buffers, or instancing. It compares Drei Instances and Merged with actual geometry merging, and covers attributes, normals, UVs, and object bounds.

It also addresses buffer updates, raycasting, and resource cleanup. For sets that change often, the guidance points to native instancing because declarative instances add React overhead. Check the installed Three.js, Fiber, and Drei versions before applying examples: constructor arguments and helper properties vary between versions.

What it helps with

choose a geometry representation for an object shape
reduce draw calls for repeated objects
update buffer attributes after changing vertices
configure normals, UVs, and geometry bounds
check raycast hits and shared resource cleanup

Example prompts for the agent

Show me how to build this shape with JSX geometry in React Three Fiber.
Explain how to instance repeated objects and reduce draw calls.
How should I update BufferGeometry after changing vertices while keeping its bounds correct?

How to install r3f-geometry

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-geometry -a codex

2Manually: put the files in place

.agents/skills/r3f-geometry/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-geometry -a cursor

2Manually: put the files in place

.cursor/skills/r3f-geometry/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install EnzeD/r3f-skills r3f-geometry

2Manually: put the files in place

.github/skills/r3f-geometry/SKILL.md

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-geometry -a gemini-cli

2Platform CLI

gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-geometry

Manually: put the files in place

.devin/skills/r3f-geometry/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-geometry -a opencode

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

Questions about r3f-geometry

How do I install r3f-geometry in Claude Code?

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

What does r3f-geometry do?

It guides an agent in building React Three Fiber geometry, custom buffers, and instanced objects. It also covers attribute updates and checking object bounds.

Does Drei Merged combine arbitrary geometry?

No. Merged builds instancing abstractions from meshes; it does not join arbitrary BufferGeometry objects. For actual merging, the skill points to mergeGeometries in three/addons/utils/BufferGeometryUtils.js.

Similar skills

SKILL.md skills catalog →

find-skills vercel-labs Discovers and installs agent skills from skills.sh directly inside your coding assistant. Handy when you need domain-specific workflows for a project. CX Codex +1 4,000,000installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs grill-with-docs Matt Pocock This skill interviews you about a plan or design and creates ADRs and a glossary along the way. Use it when decisions need sharper definition. 1,219,756installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs

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-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 r3f-physics Guides an AI coding agent through adding Rapier physics to React Three Fiber. Use it for collision-based movement, sensors, forces, and joints. CX Codex +1 1,800installs