r3f-textures — Claude Code skill for texture setup
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.
npx skills add EnzeD/r3f-skills --skill r3f-textures -a claude-codeWhat r3f-textures 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.
What it helps with
- 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 for the agent
- 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.
How to install r3f-textures
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-textures -a claude-code2Manually: put the files in place
~/.claude/skills/r3f-textures/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/r3f-textures/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-textures -a codex2Manually: put the files in place
.agents/skills/r3f-textures/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-textures -a cursor2Manually: put the files in place
.cursor/skills/r3f-textures/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-textures2Manually: put the files in place
.github/skills/r3f-textures/SKILL.md1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-textures -a gemini-cli2Platform CLI
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-texturesManually: put the files in place
.devin/skills/r3f-textures/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-textures -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-textures
How do I install r3f-textures in Claude Code?
Run npx skills add EnzeD/r3f-skills --skill r3f-textures -a claude-code. The skill file is at ~/.claude/skills/r3f-textures/SKILL.md.
What does r3f-textures do?
It guides an agent through texture setup in React Three Fiber, including color handling, UV selection, sampling, video, and render targets.
Why can changing a texture affect multiple components?
A loader may return the same cached texture object to several consumers. The skill advises cloning it for separate settings and leaving the shared source intact.
