React Three Fiber lets you create 3D scenes right inside your React app. This skill helps you control how those 3D objects look. You can pick from simple flat colors to realistic shiny metals or even glass.
You will learn about different material types like basic, standard, and physical materials. Each one has its own use. For example, meshStandardMaterial gives you realistic lighting while meshBasicMaterial ignores light for a flat look. You can also add textures like color maps or normal maps to make surfaces detailed.
This skill is great for anyone building 3D websites or games with React. It covers loading textures, setting roughness and metalness, and using advanced effects like clear coat or sheen. With these tools you can make anything from shiny car paint to soft fabric.
Global
mkdir -p ~/.claude/skills/r3f-materialsProject
mkdir -p .claude/skills/r3f-materialsFrontend 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