# R3F Skills — guide skill for 3D scenes

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

11 React Three Fiber skills checked against Fiber 9.7 and three r185: Canvas, demand loops, loaders, shaders, post.

- **Type:** [Guide](https://skills.varg.ai/guides.md) · [3D scenes](https://skills.varg.ai/browse/skills/3d-scenes.md)
- **Slug:** `enzed-r3f-skills`
- **Status:** live
- **Publisher:** Nicolas Zullo (community)
- **License:** MIT
- **Source:** https://github.com/EnzeD/r3f-skills
- **Works in:** Claude Code, Codex
- **Requires:** React 19 with @react-three/fiber 9 (verified with three 0.185, drei 10.7, postprocessing 6.39)
- **Cost:** Free — instructions only
- **Adoption:** 22,525 installs, 131 GitHub stars (GitHub + skills.sh, 2026-10-26)

## What it does

Eleven short React Three Fiber skills: fundamentals, geometry, materials, lighting, textures, loaders, animation, shaders, post-processing, interaction and Rapier physics. Each SKILL.md holds decisions, pitfalls and one checked example; all were rewritten in August 2026 for Fiber 9.7, React 19, three r185 and drei 10.7. The repo type-checks the 18 examples extracted from the Markdown and renders them in headless Chromium with pixel and remount checks. Each skill tells the agent to read the project's installed versions before choosing APIs. Topics include render-loop ownership, `frameloop="demand"` with `invalidate()`, disposal and asset ownership, color spaces and selective bloom. For video, pair it with Remotion's `@remotion/three` rules: the skills teach delta-driven `useFrame` motion and do not cover frame-exact capture. The author's own with-skill vs without-skill evals report lower token use and time, but no measured correctness gain yet.

## Use when

- Set up an R3F Canvas, typed JSX and resource ownership
- Animate with useFrame, damping, GLTF clips or a demand loop
- Write GLSL or optional TSL materials and post-processing in R3F
- Load, cache and clone GLTF assets with Suspense

## Not for

- Fiber 10 alpha or Fiber 8 / React 18 projects (not tested by its fixtures)
- Frame-exact video capture (use Remotion's @remotion/three rules in remotion-markup or Three.js Scene Composition)

## Install

- Claude Code: `npx skills add EnzeD/r3f-skills`

## Example output

https://skills.varg.ai/previews/enzed-r3f-skills.mp4 — Timelapse (x6) of the creator's in-browser 3D factory game (belts, miners, smelters), which he says he built with these R3F skills plus an opinionated AGENTS.md (reply 2023661637438214189). Cut 22-30 s of 60 s. (credit: Nicolas Zullo (@NicolasZu), https://x.com/NicolasZu/status/2019180335351611451)

## More 3D scenes skills

- [Three.js Skills](https://skills.varg.ai/skills/threejs-skills.md): 13 Three.js skills: scenes, geometry, materials, lighting, GLSL and TSL shaders, animation, post-processing, R3F.
- [Three.js Scene Composition](https://skills.varg.ai/skills/calesthio-threejs-scene-composition.md): Plan, build and capture Three.js scenes for video: absolute-time frames, seeded motion, color-safe glTF, render QA.
- [Procedural 3D Story](https://skills.varg.ai/skills/karpathy-3d-story.md): Turn a myth or book into a seeded, multi-chapter procedural three.js film in one scene.html, audited frame by frame.
- [Three.js Architecture Effects](https://skills.varg.ai/skills/threejs-architecture-effects.md): Self-assembling 3D buildings in three.js: bricks, timber, eaves and PBR, driven by one seekable progress value.