React Three Fiber Loaders
Skill VerificatoReact Three Fiber asset loading - useGLTF, useLoader, Suspense patterns, preloading. Use when loading 3D models, textures, HDR environments, or managing loading states.
This skill offers detailed code examples and best practices for loading 3D models, textures, and environments within React Three Fiber applications. It covers hooks like `useGLTF` and `useLoader`, demonstrates `Suspense` patterns for managing loading states, and includes tips on preloading and performance.
Documentation
- info:Configuration & parameter referenceWhile the examples demonstrate various parameters for loaders and hooks, explicit default values for all configurations are not fully documented within the SKILL.md, though many are standard Three.js or R3F behaviors.
Maintenance
- warning:Commit recencyThere are no commits on the default branch (pushedAt: n/a), indicating the project is likely unmaintained or the commit history is unavailable.
Versioning
- warning:Release ManagementThere is no manifest version, no GitHub release tags, and no CHANGELOG.md. Install instructions reference 'HEAD' (implied by URL), making version pinning impossible.
Practical Utility
- info:Edge casesWhile the SKILL.md provides good examples and mentions error handling, specific failure modes and recovery steps for edge cases in asset loading are not extensively documented.
Installazione
npx skills add enzed/r3f-skillsEsegue la CLI skills di Vercel (skills.sh) tramite npx — richiede Node.js in locale e almeno un agente compatibile con skills installato (Claude Code, Cursor, Codex, …). Presuppone che il repository segua il formato agentskills.io.
Estensioni simili
React Three Fiber Interaction
98React Three Fiber interaction - pointer events, controls, gestures, selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.
React Three Fiber Geometry
90React Three Fiber geometry - built-in shapes, BufferGeometry, instancing with Drei. Use when creating 3D shapes, custom meshes, point clouds, lines, or optimizing with instanced rendering.
React Three Fiber Textures
85React Three Fiber textures - useTexture, texture loading, environment maps, texture configuration. Use when loading images, working with PBR texture sets, cubemaps, HDR environments, or optimizing texture usage.
Next.js Server Component Navigation Pattern
98Guide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client navigation methods. Use when adding links, redirects, or navigation logic in server components without converting them to client components unnecessarily.
Next.js Server vs. Client Components
98Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.
3D Graphics with Three.js
983D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.