r3f-loaders — Claude Code skill: what it does, how to install
Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI.
npx skills add EnzeD/r3f-skills --skill r3f-loaders -a claude-codeWhat r3f-loaders does
This skill teaches coding agents how to fetch and manage 3D assets in React Three Fiber. It focuses on modern setups such as Fiber 9 and React 19. The guidance directs the model to pick useGLTF for glTF files and useLoader for alternate formats. It also covers addon import locations in recent Three.js releases.
It explains how to duplicate scenes without wasting memory. Duplicated meshes share geometry and materials via Drei Clone. If an instance needs unique textures, you clone only those specific properties. For separate animation mixers, the instructions recommend SkeletonUtils.clone to retain independent control.
Decoders like Draco or KTX2 must be configured prior to triggering network fetches. Because Suspense only pauses on unresolved promises, failed requests need a dedicated error boundary. Clearing the cache with useGLTF.clear does not fully free GPU memory, so resource disposal requires deliberate management.
What it helps with
- import GLB assets with useGLTF safely
- replicate 3D meshes while sharing geometry via Drei Clone
- initialize Draco and KTX2 decoders before network requests
- isolate asset fetch failures using dedicated error boundaries
Example prompts for the agent
- Show how to load a GLB model with useGLTF and place several clones in the scene.
- Configure KTX2Loader for compressed textures in React Three Fiber.
- How do I catch 3D asset fetch failures using an Error Boundary?
How to install r3f-loaders
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-loaders -a claude-code2Manually: put the files in place
~/.claude/skills/r3f-loaders/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/r3f-loaders/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-loaders -a codex2Manually: put the files in place
.agents/skills/r3f-loaders/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-loaders -a cursor2Manually: put the files in place
.cursor/skills/r3f-loaders/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-loaders2Manually: put the files in place
.github/skills/r3f-loaders/SKILL.md1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-loaders -a gemini-cli2Platform CLI
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-loadersManually: put the files in place
.devin/skills/r3f-loaders/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-loaders -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-loaders
How do I install r3f-loaders in Claude Code?
Run npx skills add EnzeD/r3f-skills --skill r3f-loaders -a claude-code. This command registers the skill in your agent configuration.
What does r3f-loaders do?
It provides patterns for importing 3D models in React Three Fiber. The skill helps agents handle caching, decoder setup, and cleanup properly.
How does r3f-loaders suggest handling duplicate models?
It advises using Drei Clone or SkeletonUtils.clone instead of calling loader hooks multiple times. Clones share cached geometries and textures to save resources.
