Building three.js scenes from React with React Three Fiber and drei: renderer setup, the scene graph as JSX, frame-loop, state and loading hooks, pointer events, and adaptive performance, on WebGL or with WebGPU and TSL. Use when writing React components that render three.js.
Install
npx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fibernpx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a claude-code -gnpx skills add CloudAI-X/threejs-skills --skill threejs-react-three-fiber -a codex -ggemini skills install https://github.com/CloudAI-X/threejs-skills.git --path skills/threejs-react-three-fibergh skill install CloudAI-X/threejs-skills threejs-react-three-fibergit clone --depth 1 https://github.com/CloudAI-X/threejs-skills /tmp/CloudAI-X__threejs-skills
mkdir -p ~/.claude/skills ~/.agents/skills
cp -R /tmp/CloudAI-X__threejs-skills/skills/threejs-react-three-fiber ~/.claude/skills/threejs-react-three-fiber # Claude Code
cp -R /tmp/CloudAI-X__threejs-skills/skills/threejs-react-three-fiber ~/.agents/skills/threejs-react-three-fiber # Codex, Cursor, Gemini CLI, Copilot, OpenCode