R3f Shaders
enzed/r3f-skillsYou can create amazing visual effects for your 3D web apps using GLSL shaders. This skill helps you write your own fragment and vertex shaders inside React Three Fiber. It uses a tool called shaderMaterial from the Drei library to make the process easy.
You can change colors, distort shapes, and add movement over time. The shader code runs on the GPU for fast performance. A special key prop lets you edit shaders live without refreshing the page. This makes testing and tweaking effects much faster.
Developers who build interactive 3D websites or games will find this skill very useful. It gives you full control over how objects look and move on screen.
Add R3f Shaders skill to your workflow
Global
mkdir -p ~/.claude/skills/r3f-shadersProject
mkdir -p .claude/skills/r3f-shadersMore Frontend Development Claude Code Skills
Frontend Designanthropics/skills
Create striking frontend interfaces with bold design and polished code every time
Vercel React Best Practicesvercel-labs/agent-skills
Optimize React and Next.js apps using proven Vercel performance guidelines
Vercel Composition Patternsvercel-labs/agent-skills
Clean React components with composition instead of boolean props
Shadcnshadcn/ui
Manage shadcn UI components easily with CLI commands and clear styling rules
Design Taste Frontendleonxlnx/taste-skill
Enforce premium frontend design with metric-based rules and smart component architecture
Impeccablepbakaus/impeccable
Polish your frontend interfaces with expert design critique and code
Minimalist Uileonxlnx/taste-skill
Build warm minimal web interfaces with editorial typography and flat bento grids
Industrial Brutalist Uileonxlnx/taste-skill
Raw mechanical UIs fusing Swiss print with military terminal aesthetics and high data density