r3f-fundamentals — скилл для Claude Code
Скилл учит агента строить сцены React Three Fiber: Canvas, типизированный JSX, хуки рендер-цикла и владение ресурсами. Для базовой архитектуры сцены, не для детальных материалов.
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-codeЧто делает r3f-fundamentals
Агент получает правила сборки R3F-сцен: как создать компонент с Canvas, типизировать пропсы через ThreeElements['mesh'] и рефы как useRef<Mesh>(null), анимировать через useFrame с мутацией рефов вместо стейта. Скилл объясняет границы типов (хуки только внутри Canvas, DOM-элементы — снаружи), владение объектами (автоматический dispose при размонтировании, <primitive> не трогает переданный объект) и выбор режима рендера (frameloop="demand" для статичных сцен с вызовом invalidate()).
Версия Fiber и Three.js берётся из package.json проекта — скилл не заставляет обновляться. WebGL-рендерер по умолчанию использует sRGB и ACES tone mapping; флаги flat и linear меняют цветовое пространство, но не исправляют выцветшие текстуры автоматически. Для теней на Three.js r182+ нужен shadows="percentage".
Для проектов на Fiber 8 + React 18 или Fiber 10 alpha API будут другими — скилл проверяет lockfile перед выбором синтаксиса.
Какие задачи решает
- собрать типизированную R3F-сцену с
Canvas, светом и вращающимся мешем - анимировать объект через
useFrameбез пересоздания на каждом кадре - настроить
frameloop="demand"иinvalidate()для статичной сцены - типизировать пропсы меша и реф через
ThreeElementsиuseRef<Mesh> - подключить Drei
Htmlдля DOM-элемента внутри Three.js-сцены
Примеры запросов агенту
- Создай R3F-сцену с вращающимся кубом,
ambientLightиdirectionalLight - Добавь компонент с
useFrame, который двигает камеру по синусоиде - Переключи рендер на
demandи вызывайinvalidate()при клике на меш
Как установить r3f-fundamentals
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-fundamentals/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-fundamentals/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a codex2Вручную: положить файлы
.agents/skills/r3f-fundamentals/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a cursor2Вручную: положить файлы
.cursor/skills/r3f-fundamentals/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-fundamentals2Вручную: положить файлы
.github/skills/r3f-fundamentals/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-fundamentalsВручную: положить файлы
.devin/skills/r3f-fundamentals/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-fundamentals
Как установить r3f-fundamentals в Claude Code?
Выполни npx skills add EnzeD/r3f-skills --skill r3f-fundamentals -a claude-code, скилл окажется в ~/.claude/skills/r3f-fundamentals/SKILL.md.
Что делает r3f-fundamentals?
Учит агента собирать React Three Fiber сцены: создавать Canvas, типизировать JSX-элементы Three.js, анимировать через useFrame, управлять владением ресурсами и выбирать режим рендера.
Можно ли использовать r3f-fundamentals на Fiber 8?
Да. Скилл проверяет версию Fiber и React в package.json и lockfile проекта, выбирает API под установленную версию и не обновляет зависимости самостоятельно.
