enzed/r3f-skills
11 skills12k installs1.2k starsGitHub
Install
npx skills add https://github.com/enzed/r3f-skillsSkills in this repo
1R3f InteractionThe r3f-interaction skill documents React Three Fiber user input patterns including pointer events, camera controls, gestures, and object selection for interactive 3D experiences. Quick start shows mesh onClick, onPointerOver, and onPointerOut handlers inside a Canvas with OrbitControls from drei. Available events span click, double-click, context menu, pointer down/up/move/over/out/enter/leave, wheel, and pointerMissed for background clicks. Event objects expose stopPropagation, intersections, point, object, and camera data for precise hit testing. Control sections cover OrbitControls, MapControls, FlyControls, and custom camera rigs with damping and constraint options. Selection patterns explain raycasting, multi-select, hover highlighting via material swaps, and draggable objects using pivot or transform controls. Performance guidance notes event handler stability, pointer capture, and limiting raycast targets. Examples progress from basic clickable meshes through gesture-heavy scenes suitable for product viewers, games, and data visualizations built with R3F.2.2kinstalls2R3f Fundamentalsr3f-fundamentals is a Claude Code skill from enzed/r3f-skills that teaches core React Three Fiber primitives for building interactive 3D scenes in React apps. The guide walks through Canvas setup, useFrame and useThree hooks, JSX mesh elements, event handling, and refs with copy-paste TSX examples such as a rotating box geometry. Developers reach for r3f-fundamentals when bootstrapping a new R3F scene, wiring the render loop, or translating raw Three.js objects into declarative React components. The skill triggers on scene setup, component creation, and render-loop work so agents apply idiomatic @react-three/fiber patterns instead of imperative Three.js glue code.1kinstalls3R3f Geometryr3f-geometry is a focused skill from the r3f-skills collection that teaches AI agents to compose Three.js geometries as JSX inside @react-three/fiber Canvas scenes, including boxGeometry, custom BufferGeometry, Drei instanced meshes, lines, and point clouds. Developers reach for it when prototyping 3D product viewers, data visualizations, or WebGL game assets without hand-rolling raw Three.js boilerplate. The skill documents the args prop pattern for geometry constructors, material pairing, and instanced rendering optimizations for scenes with many repeated objects. It pairs naturally with other r3f-skills for lighting, animation, and post-processing once base geometry is in place.1kinstalls4R3f Materialsr3f-materials is a React Three Fiber materials reference skill for styling meshes with meshStandardMaterial PBR properties, @react-three/drei material helpers, and custom shader materials. It walks through Canvas setup with ambient and directional lights, roughness and metalness tuning, texture workflows, and visual effect patterns. Developers reach for r3f-materials when creating or updating 3D scenes, choosing between standard PBR and custom shaders, or debugging why a mesh looks flat or incorrect. The skill compresses material-type decisions into copy-paste TSX patterns instead of hunting Drei and three.js docs during scene iteration.1kinstalls5R3f Postprocessingr3f-postprocessing is a React Three Fiber agent skill from enzed/r3f-skills that teaches developers to add high-quality screen-space visual effects to 3D WebGL scenes using @react-three/postprocessing. The skill covers EffectComposer setup with effects such as Bloom, depth-of-field, Vignette, blur, glow, and custom color-grading shaders inside @react-three/fiber Canvas components. Developers reach for r3f-postprocessing when a Three.js scene renders correctly but lacks cinematic polish—emissive highlights need bloom, backgrounds need depth blur, or the frame needs vignette and grading without rewriting the core scene graph. The quick-start pattern imports EffectComposer and individual effect components, then nests them inside Canvas alongside meshes and lights. Guidance also covers luminance thresholds, emissive intensity tuning, and when to compose multiple passes for glow and screen-space blur.1kinstalls6R3f Animationr3f-animation is a React Three Fiber animation skill from enzed/r3f-skills that documents hook-driven motion with useFrame, useAnimations, spring physics, and keyframes inside @react-three/fiber Canvas scenes. The quick-start example shows a rotating box mesh updating rotation.x and rotation.y each frame using delta time, establishing the standard pattern for procedural motion. Developers reach for r3f-animation when animating objects, playing GLTF animations, building physics-based movement, or replacing ad hoc requestAnimationFrame code with idiomatic R3F hooks. The skill fits WebGL product demos, interactive 3D dashboards, and browser game prototypes where frame-synced transforms must stay performant.985installs7R3f Shadersr3f-shaders is a React Three Fiber agent skill for creating and iterating custom GLSL shaders inside @react-three/fiber and three.js scenes. The skill walks through shaderMaterial setup, uniform definitions, vertex and fragment shader code, useFrame animation hooks, and extending built-in materials for effects like color shifts or vertex displacement. Developers reach for r3f-shaders when built-in Three.js materials are insufficient and a scene needs bespoke visual effects, post-processing style tweaks, or per-vertex manipulation. The workflow centers on TypeScript React components, drei helpers, and raw GLSL strings wired into a Canvas render tree. r3f-shaders fits 3D web apps, data visualizations, and game-like experiences where shader iteration speed matters more than offline rendering pipelines.982installs8R3f Physicsr3f-physics is a developer skill for adding Rapier-powered physics to React Three Fiber (R3F) 3D scenes. It documents how to wrap scenes in a Physics provider, attach RigidBody and collider components, apply forces, configure joints, and use sensor colliders for interaction triggers. The quick-start pattern imports Canvas from @react-three/fiber and Physics, RigidBody, and CuboidCollider from @react-three/rapier inside Suspense boundaries. Developers reach for r3f-physics when building falling objects, stackable blocks, character controllers, or gameplay prototypes that need deterministic collision instead of hand-animated transforms. The skill targets interactive WebGL experiences where physics fidelity must stay synchronized with React component lifecycles.971installs9R3f Lightingr3f-lighting is an enzed/r3f-skills agent skill for React Three Fiber lighting setup. It covers light types, shadow configuration, the Environment component for image-based lighting (IBL), and performance-oriented lighting patterns. The quick-start pattern enables shadows on Canvas, adds ambientLight at intensity 0.5, and configures directionalLight with castShadow and shadow-mapSize={[2048, 2048]} on meshes that castShadow and receiveShadow. Developers reach for r3f-lighting when adding lights to a new R3F scene, tuning shadow quality, setting up HDR environment maps, or optimizing lighting performance in Three.js React apps.942installs10R3f Loadersr3f-loaders is a focused React Three Fiber skill from enzed/r3f-skills that teaches asset-loading patterns for GLB models, textures, and HDR environments inside @react-three/fiber canvases. The skill documents useGLTF from @react-three/drei, generic useLoader hooks, React Suspense boundaries with null fallbacks, and preloading strategies so large assets do not stall first paint. Example code shows a Canvas wrapping a Model component that reads `/models/robot.glb` via useGLTF with OrbitControls and ambient lighting. Developers reach for r3f-loaders when a scene renders but models flash late, Suspense boundaries are missing, or HDR environments and texture atlases need consistent loading-state handling across routes.905installs11R3f Texturesr3f-textures is a React Three Fiber agent skill from enzed/r3f-skills that teaches agents how to load and configure textures, cubemaps, HDR environments, and PBR material sets inside @react-three/fiber scenes. The skill centers on @react-three/drei useTexture for image maps, wiring meshStandardMaterial map props on boxGeometry meshes, and structuring Canvas components with ambient lighting for textured objects. Developers reach for r3f-textures when agents must add wood, metal, or multi-map PBR surfaces, optimize texture usage, or fix broken environment and cubemap setup in browser 3D UIs. Quick-start examples show importing Canvas, calling useTexture with asset paths like /textures/wood.jpg, and exporting textured mesh components. The skill applies during frontend build work on product viewers, configurators, and interactive 3D marketing pages rather than backend asset pipelines.891installs