# r3f-textures

Guidance for configuring textures in React Three Fiber, from color spaces and UV channels to video and render targets. Useful when an image looks wrong or texture memory needs attention.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1700 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-textures/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/r3f-textures

## What it does

The skill covers color-space choices for color maps versus data maps, UV channel selection, wrapping, and filtering. It also discusses video textures, Canvas/DataTexture updates, and render targets. With glTF assets, follow the model’s existing texture setup; changing orientation again can break a correctly configured map.

Loader caches can hand the same texture object to multiple components. Changing its color space or repeat settings can therefore affect every consumer. For per-object changes, the skill recommends cloning the texture and disposing only the clone you own.

It also describes mipmaps and ways to inspect GPU texture counts. Render-target guidance is in `references/render-targets.md`; sampling a texture while rendering into that same target is unsafe.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add EnzeD/r3f-skills --skill r3f-textures -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-textures/SKILL.md

## When to use it
- choose a color space for color and data maps
- select the geometry’s UV channel for a texture
- adjust wrapping or filtering when an image renders incorrectly
- keep per-object texture settings from affecting other consumers
- avoid sampling a render target during a write

## Example prompts
- Set the right color-space handling for the color and roughness maps in this React Three Fiber scene.
- Check why this texture repeats incorrectly and select the matching UV channel.
- Review how this component uses video textures and render targets.

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