{"enrichment":{"faq":[{"a":"R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. It accelerates your 3D graphics pipeline by offering pre-built GLSL code and material definitions, so you don't have to reinvent visual effects from scratch when building WebGL-powered 3D scenes in React.","q":"What is R3f Shaders and how does it help React developers?"},{"a":"R3f Shaders offers a library of reusable shader code tailored for 3D web graphics in React Three Fiber projects. You can browse pre-built GLSL shaders and material definitions that are ready to integrate into your r3f applications, reducing development time and ensuring consistent, optimized visual effects across your projects.","q":"How do I access reusable shader code library for 3D web graphics?"},{"a":"Yes, R3f Shaders supports learning and writing custom GLSL shaders for React Three Fiber. The resource provides shader examples and patterns that teach you how to create and apply vertex and fragment shaders, helping you understand shader compilation and integration within r3f's material system.","q":"Can R3f Shaders help me write custom GLSL shaders in r3f?"},{"a":"R3f Shaders delivers a range of shader effects and materials specifically built for React Three Fiber projects. These pre-built resources cover common visual effects and material definitions, enabling you to quickly find and implement the exact shader-based effects your 3D scenes need without starting from zero.","q":"What shader effects and materials does R3f Shaders provide?"},{"a":"R3f Shaders includes guidance on optimizing shader performance in React Three Fiber applications. The library's pre-built shaders are designed with performance in mind, and the resource helps you understand best practices for shader uniforms, compilation, and integration to ensure your 3D graphics run efficiently.","q":"How can R3f Shaders improve shader performance in my applications?"},{"a":"R3f Shaders is built specifically for React Three Fiber, which wraps three.js. The shader materials and effects in R3f Shaders are optimized for r3f's component-based approach, making it easier to integrate three.js shaders into your React 3D applications than using raw three.js directly.","q":"Does R3f Shaders work with three.js shaders for React?"}],"shadow_tags":["webgl-rendering","glsl-programming","3d-graphics","material-system","shader-effects","react-3d-library","gpu-acceleration","visual-effects"],"summary_rewrite":"R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. Access pre-built GLSL code and material definitions to accelerate your 3D graphics pipeline without reinventing visual effects from scratch."},"gist":{"api_url":"https://skillfed.io/api/skills/EnzeD/r3f-skills/r3f-shaders.json","as_of":"2026-01-20","description":"R3f Shaders provides a curated collection of shader effects and materials designed specifically for React. npx skillfed install EnzeD/r3f-skills/r3f-shaders","install":{"manual":["git clone https://github.com/EnzeD/r3f-skills","cp -r r3f-skills ~/.claude/skills/r3f-shaders"],"primary":"npx skillfed install EnzeD/r3f-skills/r3f-shaders","version":"a570567f"},"kind":"skill","mirror_url":"https://skillfed.io/EnzeD/r3f-skills/r3f-shaders.md","similar":[{"id":"calesthio/OpenMontage/threejs-shaders","name":"Threejs Shaders","publisher":"calesthio/OpenMontage","url":"https://skillfed.io/calesthio/OpenMontage/threejs-shaders"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-materials","name":"r3f-materials","publisher":"Bbeierle12/Skill-MCP-Claude","url":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/r3f-materials"},{"id":"Bbeierle12/Skill-MCP-Claude/shader-fundamentals","name":"shader-fundamentals","publisher":"Bbeierle12/Skill-MCP-Claude","url":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/shader-fundamentals"},{"id":"calesthio/OpenMontage/threejs-materials","name":"Threejs Materials","publisher":"calesthio/OpenMontage","url":"https://skillfed.io/calesthio/OpenMontage/threejs-materials"},{"id":"Bbeierle12/Skill-MCP-Claude/postfx-bloom","name":"postfx-bloom","publisher":"Bbeierle12/Skill-MCP-Claude","url":"https://skillfed.io/Bbeierle12/Skill-MCP-Claude/postfx-bloom"}],"title":"R3f Shaders by EnzeD: Find shader effects and materials for React Three Fiber projects \u2014 SkillFed","use":{"when":["R3f Shaders offers a library of reusable shader code tailored for 3D web graphics in React Three Fiber projects.","Yes, R3f Shaders supports learning and writing custom GLSL shaders for React Three Fiber."]},"what":{"lead":"R3f Shaders provides a curated collection of shader effects and materials designed specifically for React Three Fiber developers. It accelerates your 3D graphics pipeline by offering pre-built GLSL code and material definitions, so you don't have to reinvent visual effects from scratch when building WebGL-powered 3D scenes in React."}},"id":"EnzeD/r3f-skills/r3f-shaders","install":{"mode":"external","repo":"https://github.com/EnzeD/r3f-skills"},"links":{"html":"https://skillfed.io/EnzeD/r3f-skills/r3f-shaders","md":"https://skillfed.io/EnzeD/r3f-skills/r3f-shaders.md","repo":"https://github.com/EnzeD/r3f-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":7,"language":null,"last_updated":"2026-01-20","license":null,"name":"R3f Shaders","publisher":"EnzeD","stars":105},"relations":{"similar":[{"id":"calesthio/OpenMontage/threejs-shaders"},{"id":"CloudAI-X/threejs-skills/threejs-shaders"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-materials"},{"id":"Bbeierle12/Skill-MCP-Claude/shader-fundamentals"},{"id":"calesthio/OpenMontage/threejs-materials"},{"id":"CloudAI-X/threejs-skills/threejs-materials"},{"id":"secondsky/claude-skills/threejs"},{"id":"organvm/a-i--skills/react-three-fiber-patterns"},{"id":"Bbeierle12/Skill-MCP-Claude/postfx-bloom"},{"id":"martinholovsky/claude-skills-generator/glsl"}]},"slug":{"owner":"EnzeD","repo":"r3f-skills","skill":"r3f-shaders"},"version":"a570567f"}