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.

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

Not for

Install

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