🎯

r3f-shaders

🎯Skill

from enzed/r3f-skills

What it does

React Three Fiber shader development skill providing accurate, up-to-date API references for R3F, Drei, and the Three.js ecosystem with idiomatic React 3D patterns.

📦

Same repository

enzed/r3f-skills(11 items)

r3f-shaders

Installation

Quick InstallInstall with npx

npx skills add https://github.com/enzed/r3f-skills --skill r3f-shaders

Manual InstallCopy SKILL.md content and save to the path below

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

Need more details? View full documentation on GitHub →

SKILL.md

182Installs

Last UpdatedJan 20, 2026

View on GitHub Back to Skills

More from this repository10

🎯

r3f-interaction🎯Skill

React Three Fiber interaction skills covering pointer events, camera controls, gestures, and selection for building interactive 3D web experiences.

🎯

r3f-fundamentals🎯Skill

Provides accurate, up-to-date API references and idiomatic React patterns for React Three Fiber (R3F), Drei, and the 3D ecosystem to enhance AI coding assistant capabilities.

🎯

r3f-geometry🎯Skill

React Three Fiber geometry skill for creating 3D shapes, custom meshes, BufferGeometry, point clouds, lines, and instanced rendering optimization with Drei

🎯

r3f-physics🎯Skill

React Three Fiber physics skill for Rapier integration covering RigidBody, colliders, forces, joints, sensors, character controllers, and interactive physics-based experiences

🎯

r3f-materials🎯Skill

React Three Fiber materials skill providing accurate, up-to-date API references for R3F, Drei, and the Three.js ecosystem with idiomatic React 3D patterns.

🎯

r3f-lighting🎯Skill

React Three Fiber lighting skill covering light types, shadow configuration, Environment component, image-based lighting (IBL), and lighting performance optimization

🎯

r3f-animation🎯Skill

React Three Fiber animation skill covering useFrame, useAnimations, spring physics, keyframes, procedural motion, and GLTF animation playback

🎯

r3f-postprocessing🎯Skill

React Three Fiber post-processing skill covering bloom, depth of field, color grading, vignette, screen effects, and custom screen-space shaders via @react-three/postprocessing

🎯

r3f-textures🎯Skill

Provides React Three Fiber texture handling guidance including useTexture hook usage, PBR texture sets, environment maps, cubemaps, HDR environments, and texture configuration best practices.

🎯

r3f-loaders🎯Skill

React Three Fiber asset loading skill covering useGLTF, useLoader, Suspense patterns, preloading strategies for 3D models, textures, and HDR environments