# 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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1900 installs · ★ 130
- Author: EnzeD
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/EnzeD/r3f-skills/tree/HEAD/skills/r3f-geometry/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/r3f-geometry

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/r3f-geometry/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/r3f-geometry/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/r3f-geometry/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/r3f-geometry/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install EnzeD/r3f-skills r3f-geometry
```

2. **Manually: put the files in place**
- File: `.github/skills/r3f-geometry/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-geometry
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/r3f-geometry/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-geometry -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/EnzeD/r3f-skills/tree/HEAD/skills/r3f-geometry/SKILL.md

## When to use it
- 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
- 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?

## Similar
- [find-skills](https://affpapa.org/en/nevibecode/skills/find-skills.md) — skill · 4000000 installs
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [grill-me](https://affpapa.org/en/nevibecode/skills/grill-me.md) — skill · 1424476 installs
- [grill-with-docs](https://affpapa.org/en/nevibecode/skills/grill-with-docs.md) — skill · 1219756 installs
- [improve-codebase-architecture](https://affpapa.org/en/nevibecode/skills/improve-codebase-architecture.md) — skill · 1163035 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs

From the same set: [enzed/r3f-skills](https://affpapa.org/en/nevibecode/by/enzed/r3f-skills.md) — 9 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md