enzed/r3f-skills
11 skills8.6k installs979 starsGitHub
Install
npx skills add https://github.com/enzed/r3f-skillsSkills in this repo
1R3f Interactionr3f-interaction is a procedural skill for solo builders shipping WebGL experiences with React Three Fiber. Product demos, portfolio 3D viewers, lightweight games, and configurators all need reliable hit testing, hover states, and camera controls; raw Three.js examples rarely drop cleanly into R3F’s React event model. This skill starts from a minimal interactive mesh inside Canvas, documents the pointer events R3F exposes on meshes, and shows how to combine them with drei's OrbitControls for exploratory cameras. Use it when you are past the static mesh tutorial and need click-to-select, contextual menus, drag-adjacent pointer flows, or polished navigation without spelunking the docs. It fits indie SaaS marketing pages with 3D heroes as well as richer interactive content where input fidelity drives conversion or comprehension.1.9kinstalls2R3f Geometryr3f-geometry is an agent skill that maps Three.js geometry concepts into React Three Fiber JSX so solo builders can stand up 3D scenes without constantly cross-reading vanilla Three docs. It starts from a minimal Canvas scene with ambient light and a box mesh, then catalogs built-in shapes—boxes, spheres, planes, circles, cylinders—with the correct args arrays for segment counts and partial shapes like hemispheres. The skill is aimed at indie SaaS teams embedding product viewers, creative portfolios, or lightweight games where draw-call budget matters. Beyond primitives, it covers BufferGeometry for custom attributes, point clouds, and line strips, plus instancing through Drei when hundreds of identical meshes would choke a naive map loop. Use it when prompts ask for r3f shapes, custom meshes, or instanced crowds in a React stack already using @react-three/fiber.748installs3R3f Fundamentalsr3f-fundamentals is a reference skill for solo builders adding WebGL to React apps with @react-three/fiber. It centers on the Canvas entry point, which owns the WebGL context, scene, camera, and renderer, and shows how to configure perspective or orthographic cameras, renderer gl settings, and default lighting patterns. You learn the render-loop hook useFrame for per-frame updates, useThree for reading state from inside the tree, and the idiomatic JSX elements that mirror Three.js objects. The included RotatingBox example ties refs, geometry args, and meshStandardMaterial into a copy-paste starting point. Use it when you are bootstrapping a first scene, structuring reusable R3F components, handling events on meshes, or debugging why nothing renders. It matters because R3F’s React model is easy to get wrong without a concise map from React lifecycle to Three.js objects, especially for indies shipping marketing sites, product configurators, or lightweight game-like experiences without a dedicated graphics team.723installs4R3f Postprocessingr3f-postprocessing is an agent skill that teaches solo builders how to add cinematic visual effects to React Three Fiber scenes using @react-three/postprocessing and the underlying postprocessing library. It is for indie devs shipping 3D web experiences, product demos, or interactive content who need bloom, depth of field, vignette, blur, glow, and color grading without reverse-engineering EffectComposer APIs. Invoke when you are inside a Canvas and need a documented pattern for stacking screen-space passes, tuning emissive-driven bloom, or scaffolding custom shaders. The skill matters because post-processing is easy to break—wrong buffer flags, composer order, or missing installs produce silent failures or washed-out frames. It compresses installation, composer placement after scene content, and starter prop defaults into copy-paste TSX so your agent stops guessing package names and composer options.695installs5R3f Materialsr3f-materials is a reference-oriented agent skill for solo builders shipping interactive 3D in React. It applies when you are styling meshes, picking physically based versus unlit materials, wiring textures, or moving toward custom GLSL via shaderMaterial. The skill opens with a minimal @react-three/fiber Canvas setup using meshStandardMaterial so lighting and PBR knobs are explicit, then orients you with a comparison table across eight core Three.js material classes so you do not pay for full PBR when you need flat color, and do not use basic materials when you need realistic lighting. Deeper sections walk properties for meshBasicMaterial and related types, including transparency, side rendering, and map slots. Use it during Build frontend work on product viewers, marketing 3D, or game-like experiences where material choice drives both look and performance. It complements general React skills but does not replace Drei or R3F scene architecture docs.691installs6R3f Physicsr3f-physics is an agent skill for solo builders adding physics simulation to React Three Fiber apps with @react-three/rapier. It targets the Build phase when you need falling objects, static grounds, collision detection, character-controller-style interactions, or sensor triggers in a browser 3D scene. The skill walks through a minimal Canvas setup with Suspense, a Physics root (gravity, debug, timestep), RigidBody-wrapped meshes, and CuboidCollider primitives for static geometry, plus installation of the Rapier bridge package. It fits indie game prototypes, marketing interactives, and product configurators where believable motion and contact matter more than hand-animated transforms. Invoke when the task explicitly mentions Rapier, RigidBody, colliders, or physics-based experiences—not for pure CSS or 2D UI motion.670installs7R3f Shadersr3f-shaders teaches solo builders how to escape stock Three.js materials inside React Three Fiber when they need bespoke visuals—gradient shifts, vertex displacement, post-style fragment math, or experiments that do not map cleanly to MeshStandardMaterial. The skill centers on drei's shaderMaterial helper: declare uniforms (scalars, vectors, THREE.Color), wire vertex shaders that pass vUv or custom varyings, and fragment shaders that output gl_FragColor, then register the material with extend for idiomatic JSX. useFrame keeps uniforms in sync with the render loop without fighting React reconciliation. The documented HMR key on the material speeds local tweak cycles. You get a minimal Canvas + planeGeometry scaffold you can grow into game VFX, marketing 3D heroes, or interactive demos. Prerequisite comfort with TypeScript/React and a running R3F app is assumed; deep GLSL debugging is intermediate territory.668installs8R3f Animationr3f-animation is an agent skill package that teaches React Three Fiber motion patterns for solo and indie builders shipping WebGL experiences in React. It centers on useFrame as the core hook that runs each render frame, exposing the R3F state object and a delta time value so rotations, oscillations, and follow-camera logic stay frame-rate independent. The readme walks through a minimal Canvas setup with a ref-driven mesh, then expands into playing GLTF animation clips via useAnimations, composing spring-based easing, and authoring keyframe-style parameter changes without leaving the React component model. Install it when you are past a static R3F scene and need reliable guidance for spinning loaders, interactive product viewers, lightweight game entities, or marketing 3D heroes. It matters because mixing raw Three.js AnimationMixer boilerplate with R3F lifecycle hooks is a common source of jank, memory leaks, and hooks-rule violations—this skill keeps motion idiomatic to @react-three/fiber and drei.661installs9R3f LightingR3f-lighting is an agent skill for solo builders shipping 3D experiences in the browser with React Three Fiber who need procedural guidance on light types, shadow configuration, and environment lighting rather than copying incomplete snippets. It opens with a complete quick-start scene showing castShadow and receiveShadow on meshes, then summarizes ambient, hemisphere, directional, point, spot, and rect area lights with shadow capability and cost. The skill supports configuring directional sun lights with shadow map sizes, using Environment for HDRI-style IBL, and optimizing when scenes get heavy. It aligns with standard @react-three/fiber and drei patterns indie devs use for product demos, configurators, and lightweight games. Complexity is intermediate because shadow quality and light count directly affect mobile performance. Invoke it whenever you are extending a R3F scene’s look and feel, not when you only need unrelated animation or physics setup.640installs10R3f Loadersr3f-loaders is an agent skill that teaches React Three Fiber asset loading patterns for solo builders shipping WebGL experiences. It walks through useGLTF from @react-three/drei as the default path for GLTF and GLB files, including how to access nodes and materials for selective mesh rendering instead of dumping the whole scene blindly. The skill explains Suspense fallbacks so the canvas does not flash errors while binaries parse, and ties in preloading so navigation between routes does not re-hit the network for the same robot.glb. useLoader variants and texture or HDR environment loading are in scope when you need lower-level Three.js loaders inside the R3F lifecycle. Invoke it while you are wiring a product viewer, game prototype, or marketing hero scene where load state and cache behavior matter as much as the mesh itself. It is procedural knowledge packaged as SKILL.md guidance—not a hosted MCP server—meant for Claude Code, Cursor, or Codex agents editing a Vite or Next app with @react-three/fiber installed.609installs11R3f TexturesR3F Textures is a focused React Three Fiber skill from enzed/r3f-skills that walks solo builders through loading images into WebGL materials the idiomatic way—with @react-three/drei useTexture rather than manual THREE.TextureLoader boilerplate. Use it when you are building 3D product demos, games, or creative tooling and need color, normal, and roughness maps on standard materials, or when you are swapping in cubemaps and HDR environment lighting for believable PBR. The quick-start places a textured box inside a minimal Canvas with ambient light; advanced snippets show array destructuring for full map stacks on high-segment spheres. The description explicitly calls out optimization, which matters on indie projects targeting laptops and mobile GPUs. It pairs naturally with other r3f-skills modules when you already have geometry and lighting in place but materials still look flat or load asynchronously without suspense boundaries.605installs