React Three Fiber Skills
r3f-skills
Eleven independent skills for React Three Fiber 9: scene, lighting, materials, Rapier physics, shaders and post-processing
- 136 ★ on the repository
- Last commit
Minimal access
Why this level
- The skills only supply instructions and code examples and run nothing themselves
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/r3f-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills only supply instructions and code examples and run nothing themselves
This is third-party code. Review the repository files before installing.
What it does
The set of 11 skills teaches an agent to build 3D scenes in React Three Fiber with current APIs. The skills cover the basics of Canvas and hooks, geometry and instancing, materials and transparency, lighting and shadows, textures and color spaces, asset loaders, animation, GLSL shaders and optional TSL, post-processing, pointer events and Rapier physics. Each `SKILL.md` holds decisions, likely mistakes and one verified example, while larger recipes sit in the skill's `references/` folder and load on demand. Before choosing an API the agent is told to check versions in the project manifest instead of bending code to a recipe. The author reviewed the set on 31 August 2026 against Fiber 9.7.0, React 19.2.8, three r185, `drei` 10.7.8 and Rapier 2.2.0. All 18 TypeScript examples pass type checking, and the 11 main ones render in Chromium during validation.
Who it is for. Front-end developers on React 19 who build 3D scenes and configurators and want the agent not to mix up Fiber, drei and three versions.
Good fit when
- The agent writes code for Fiber 8 and React 18 while the project runs Fiber 9 and React 19
- A scene lags because of many identical meshes and it is time to move to instancing
- You need selective bloom and control of the output color in post-processing
- A 3D model has to load with Suspense, decoders and a cache without memory leaks
- Rapier physics goes into a scene with colliders, joints and simulation steps
Not a fit when
- The project is plain Three.js without React: the skills describe Fiber and its hooks
- The stack stayed on Fiber 8 and React 18: the author did not test that pairing and Fiber 10 alpha APIs are excluded
- You need WebGPU certification: the author's browser checks run on WebGL
Example request
Add 500 identical cubes to the scene through instancing, highlight the one under the cursor and enable selective bloomLimitations
The recipes are tied to Fiber 9 and React 19, while the Fiber 8 and React 18 pairing stays a separate legacy variant that the fixtures do not test. The WebGPU and TSL recipes are optional: the types are checked, but browser checks run on WebGL and do not confirm WebGPU compatibility. A compatible version range does not guarantee that every feature combination works. Running the author's own checks needs Node.js 22.12 and the public npm registry, while the skills themselves need none of the repository's dependencies. GitHub metadata shows no license, but the README calls the code MIT.
How to disable. Delete the needed `r3f-*` skill folders from the agent's skills directory or remove them with the `skills` manager. Your project code stays as it is.
FAQ
How do I install the React Three Fiber skills in Claude Code?
Run `npx skills add EnzeD/r3f-skills`. The manager lets you choose skills and agents. For a manual install copy the skill folders together with their `references/` subfolders.
Do I have to install all 11 skills at once?
No, every skill installs on its own. The descriptions help the agent pick the right one, and it loads extra reference files only for the topic.
Do the skills work with Fiber 8?
The author did not test the Fiber 8 and React 18 stack and treats it as a separate legacy pairing. For such a project check every recipe against the manifest versions.
How does the author validate the examples?
`npm run check` validates skill frontmatter and links and the types of all 18 TypeScript examples. `npm run test:browser` renders the 11 main examples in Chromium with generated assets.
Which libraries do the skills cover?
React Three Fiber, `drei`, `three`, Rapier for physics and the post-processing package. The WebGPU and TSL recipes are optional, and browser checks run on WebGL.
Discussion
No questions or reviews yet.
Related
SkillsTen reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
A set of skills for Vue 3 development: Composition API practices, router, Pinia, testing, JSX, Options API and debugging
Eight skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, exploded machine views
julianromli/ai-skills
ai-skills
A collection of 31 skills for Claude Code and other agents: interfaces, React, Postgres, code review, SEO and browser automation
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| React Three Fiber Skills (this card) | no | 136 | |
| Three.js Skills | no | 4,168 | reference skills for plain Three.js, while this covers React Three Fiber 9 with version-checked examples |
| WebGPU Three.js TSL Skill | no | 1,281 | a skill about WebGPU and TSL, while here WebGL is the baseline and TSL is optional |
README in short
The README lists the 11 skills with the focus of each, the install command and a table of verified package versions. It then describes the commands for structure, type and browser render checks, comparing versions with npm releases and contribution rules: drop generic tutorials in favor of decisions and sources.
README badge
Original SKILL.md
---
name: r3f-fundamentals
description: Set up React Three Fiber scenes, Canvas, typed JSX, hooks, and resource ownership. Use for scene architecture and render-loop setup, rather than detailed materials or effects.
---
# React Three Fiber fundamentals
## Choose the right baseline
- Inspect the project's manifest and lockfile before selecting APIs. These examples target Fiber 9 / React 19; Fiber 8 pairs with React 18. Do not upgrade a project just to match a recipe.
- Check installed Three.js and Drei versions too. Use released documentation matching those versions; if unavailable, state the uncertainty instead of inventing props.
- Keep the existing renderer unless the task calls for changing it. For WebGPU, read [renderer selection](references/renderers.md); Fiber 10 alpha APIs are not Fiber 9 APIs.
## Minimal scene
This example owns its Canvas. Its parent must have a nonzero height.
```tsx
import { useRef } from 'react'
import { Canvas, useFrame, type ThreeElements } from '@react-three/fiber'
import type { Mesh } from 'three'
function RotatingBox(props: ThreeElements['mesh']) {
const mesh = useRef<Mesh>(null)
useFrame((_, delta) => {
if (mesh.current) mesh.current.rotation.y += delta * 0.5
})
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="coral" />
</mesh>
)
}
export default function Example() {
return (
<Canvas camera={{ position: [0, 0, 5] }} dpr={[1, 2]}>
<ambientLight intensity={0.5} />
<directionalLight position={[3, 4, 5]} intensity={2} />
<RotatingBox />
</Canvas>
)
}
```