Skip to main content
affpapa.org
RU EN
skill CX Codex

r3f-fundamentals — Claude Code skill: React Three Fiber scene setup

Skill that teaches the agent to build React Three Fiber scenes: Canvas, typed JSX, render-loop hooks, and resource ownership. For scene architecture, not detailed materials.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-code
Open on GitHub

What r3f-fundamentals does

The agent learns how to assemble R3F scenes: create a Canvas component, type props with ThreeElements['mesh'] and refs as useRef<Mesh>(null), animate via useFrame by mutating refs instead of state. The skill covers type boundaries (hooks only inside Canvas, DOM elements outside), object ownership (automatic dispose on unmount, <primitive> leaves the passed object untouched), and render-loop modes (frameloop="demand" for static scenes with manual invalidate() calls).

Fiber and Three.js versions are read from the project's package.json — the skill does not force upgrades. The default WebGL renderer uses sRGB output and ACES filmic tone mapping; flat and linear flags alter the color space but do not generically fix washed-out textures. On Three.js r182+, use shadows="percentage" for shadows.

For projects on Fiber 8 + React 18 or Fiber 10 alpha, the APIs differ — the skill checks the lockfile before picking syntax.

What it helps with

  • build a typed R3F scene with Canvas, lights, and a rotating mesh
  • animate an object via useFrame without recreating it every frame
  • configure frameloop demand mode and invalidate for a static scene
  • type mesh props and refs with ThreeElements and useRef
  • embed a DOM element inside a Three.js scene using Drei Html

Example prompts for the agent

  • Create an R3F scene with a rotating cube, ambientLight, and directionalLight
  • Add a component with useFrame that moves the camera along a sine wave
  • Switch render to demand and call invalidate() on mesh click

How to install r3f-fundamentals

1Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-code

2Manually: put the files in place

~/.claude/skills/r3f-fundamentals/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/r3f-fundamentals/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about r3f-fundamentals

How to install r3f-fundamentals in Claude Code?

Run npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-code; the skill will be placed in ~/.claude/skills/r3f-fundamentals/SKILL.md.

What does r3f-fundamentals do?

Teaches the agent to build React Three Fiber scenes: create Canvas, type Three.js JSX elements, animate via useFrame, manage resource ownership, and choose render modes.

Can I use r3f-fundamentals with Fiber 8?

Yes. The skill checks the Fiber and React versions in package.json and the lockfile, selects APIs for the installed version, and does not upgrade dependencies on its own.

Similar skills

Everything for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set9

r3f-interaction Configures pointer events, object picking, dragging, and camera controls in React Three Fiber. Helps avoid input conflicts between 3D scene controls and interactive meshes. CX Codex +1 3,300installs r3f-animation Skill for smooth animation of 3D objects in React Three Fiber using useFrame, damping, and GLTF clips. Useful for procedural motion, state transitions, and on-demand animation control. CX Codex +1 2,000installs r3f-materials Guides the agent in configuring PBR and transparency in React Three Fiber. Prevents texture color space mistakes and unnecessary GPU overhead. CX Codex +1 1,900installs r3f-geometry Guides an agent through geometry, custom buffers, points, lines, and instancing in React Three Fiber. Useful when shaping objects or reducing draw calls. CX Codex +1 1,900installs r3f-postprocessing A skill that walks the agent through postprocessing in React Three Fiber: glow on chosen meshes, depth of field, SSAO. Useful when the render looks off and you cannot pin down why. CX Codex +1 1,900installs r3f-loaders Guides 3D asset loading and reuse in React Three Fiber. Helps set up hooks, preloading, scene cloning, and fallback UI. CX Codex +1 1,800installs r3f-physics Guides an AI coding agent through adding Rapier physics to React Three Fiber. Use it for collision-based movement, sensors, forces, and joints. CX Codex +1 1,800installs r3f-textures Guidance for configuring textures in React Three Fiber, from color spaces and UV channels to video and render targets. Useful when an image looks wrong or texture memory needs attention. CX Codex +1 1,700installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor