skill CX Codex

r3f-materials — Claude Code skill: what it does, how to install

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

Run `npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-code` in your terminal.

Guides the agent in configuring PBR and transparency in React Three Fiber. Prevents texture color space mistakes and unnecessary GPU overhead.

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

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

Open on GitHub

What r3f-materials does

The skill outlines guidelines for choosing surface materials in React Three Fiber. It steers the assistant toward the simplest viable option, favoring meshStandardMaterial or unlit meshBasicMaterial before jumping to costly physical shaders. Color management rules are strict: sRGB for color maps, alongside NoColorSpace for roughness and normal data.

Specific guidance covers transparency and glass rendering. Using alphaTest is recommended for cutouts to prevent alpha blending sort bugs. For realistic transmission, it details how Drei helpers like MeshTransmissionMaterial add extra scene passes and require low initial sample counts.

The examples target Fiber 9 and React 19 under WebGL. Drei shader materials will break if ported directly to WebGPU without switching to TSL. Disposing of a material in Three.js also leaves attached textures in GPU memory unless they are released separately.

What it helps with

select the least expensive Three.js material for a mesh
configure cutout transparency with alphaTest to avoid depth sorting bugs
assign correct color spaces to albedo and roughness textures
optimize glass transmission passes to keep GPU draw calls down

Example prompts for the agent

Configure a realistic rough gold material using meshStandardMaterial and environment lighting.
Set up glass transmission in Drei without hurting render performance.
Fix the texture color space setup on this imported model.

How to install r3f-materials

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

1GitHub CLI

gh skill install EnzeD/r3f-skills r3f-materials

2Manually: put the files in place

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

1Skills CLI (Vercel)

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

2Platform CLI

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

Manually: put the files in place

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

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

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

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

Questions about r3f-materials

How do I install r3f-materials in Claude Code?

Run npx skills add EnzeD/r3f-skills --skill r3f-materials -a claude-code in your terminal.

What does the r3f-materials skill do?

It teaches coding agents how to configure Three.js materials, transparency, and PBR properties cleanly inside React Three Fiber.

Does disposing a material also free its textures?

No. Disposing a material does not dispose of its textures, so you must manage texture lifecycles independently to avoid memory leaks.

Similar skills

Everything for Frontend and UI →

threejs-r3f AThevon A skill covering Three.js and React Three Fiber: scene setup, hooks, postprocessing and performance rules. Useful when your agent writes 3D in React. CX Codex +1 1,000installs threejs-materials-lighting gamedev-skills Picks the right three.js material, adds lights and shadow maps, and wires an HDR environment so a model stops rendering black or flat. CX Codex +1 5,500installs threejs-materials calesthio Reference for Three.js materials: PBR, basic, phong, custom shaders. Helps you pick the right material for a mesh, configure textures, and optimize rendering. CX Codex +1 1,000installs react-three-fiber freshtechbro Teaches the agent to build declarative Three.js 3D scenes in React using JSX components, animation hooks, and Suspense loaders. CX Codex +1 3,800installs threejs-animation iart-ai A coding-agent skill for Three.js and React Three Fiber motion: scenes, GLTF clips, scroll-linked cameras, instancing and GPU cleanup. CX Codex +1 1,400installs threejs-react-three-fiber CloudAI-X A skill for writing three.js scenes as React components. Covers the Canvas, frame-loop hooks and pointer events in React Three Fiber. CX Codex +1 1,300installs

From the same set9

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-fundamentals Skill that teaches the agent to build React Three Fiber scenes: Canvas, typed JSX, render-loop hooks, and resource ownership. For scene architecture, not detailed materials. CX Codex +1 2,100installs r3f-animation Skill for smooth animation of 3D objects in React Three Fiber using useFrame, damping, and GLTF clips. Useful for procedural motion, state transitions, and on-demand animation control. CX Codex +1 2,000installs 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. 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 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. CX Codex +1 1,700installs