скилл CX Codex

r3f-loaders — скилл для Claude Code: что делает и как установить

Q: Как установить r3f-loaders в Claude Code?

Выполните команду `npx skills add EnzeD/r3f-skills --skill r3f-loaders -a claude-code`. Она добавит скилл в конфигурацию агента.

Q: Как скилл рекомендует размножать загруженные объекты?

Вместо повторного вызова загрузчика используется компонент `Clone` из Drei или `SkeletonUtils.clone`. Модели делят общую геометрию, что экономит память.

Помогает загружать и переиспользовать 3D-модели в React Three Fiber. Настраивает хуки, предзагрузку, клонирование объектов и показ заглушек.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

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

Открыть на GitHub

Что делает r3f-loaders

Скилл подсказывает, как правильно организовать загрузку 3D-файлов в связке с React Three Fiber. Примеры в нём ориентированы на Fiber 9 и React 19. Ассистент проверяет версии пакетов и советует брать useGLTF для форматов glTF или GLB, а для остальных вызывать useLoader.

Инструкции охватывают работу с кэшем и повторное размещение объектов через компонент Clone из Drei. Для раздельных скелетных анимаций скилл рекомендует использовать SkeletonUtils.clone. Важно не менять общую сцену напрямую: размноженные элементы делят геометрию и материалы, поэтому точечные правки требуют предварительного клонирования нужных текстур.

Отдельный блок посвящён обработке сбоев и декодерам Draco или KTX2. Загрузка через Suspense перехватывает только ожидание ответа, тогда как сетевые ошибки требуют отдельного Error Boundary. Сброс кэша через useGLTF.clear не очищает память видеокарты целиком, поэтому контролировать удаление ресурсов придётся вручную.

Какие задачи решает

загрузить GLB-модели через useGLTF без утечек памяти
клонировать объекты с общей геометрией через Drei Clone
настроить декодеры Draco и KTX2 перед отправкой запросов
изолировать сбои загрузки через Error Boundary

Примеры запросов агенту

Покажи, как загрузить модель через useGLTF и расставить её копии по сцене.
Как правильно настроить KTX2Loader для сжатых текстур в React Three Fiber?
Помоги изолировать ошибку загрузки 3D-ассета с помощью Error Boundary.

Как установить r3f-loaders

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/r3f-loaders/

1Через Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-loaders -a codex

2Вручную: положить файлы

.agents/skills/r3f-loaders/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-loaders -a cursor

2Вручную: положить файлы

.cursor/skills/r3f-loaders/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install EnzeD/r3f-skills r3f-loaders

2Вручную: положить файлы

.github/skills/r3f-loaders/SKILL.md

1Через Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-loaders -a gemini-cli

2Командой платформы

gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-loaders

Вручную: положить файлы

.devin/skills/r3f-loaders/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add EnzeD/r3f-skills --skill r3f-loaders -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о r3f-loaders

Как установить r3f-loaders в Claude Code?

Выполните команду npx skills add EnzeD/r3f-skills --skill r3f-loaders -a claude-code. Она добавит скилл в конфигурацию агента.

Зачем нужен скилл r3f-loaders?

Он даёт агенту правила по загрузке 3D-моделей в React Three Fiber. Помогает избежать утечек памяти, дублирования геометрии и зависаний при декодировании.

Как скилл рекомендует размножать загруженные объекты?

Вместо повторного вызова загрузчика используется компонент Clone из Drei или SkeletonUtils.clone. Модели делят общую геометрию, что экономит память.

Похожие скиллы

Всё по теме «Фронтенд и UI» →

threejs-r3f AThevon Скилл по Three.js и React Three Fiber: правила сцен, хуков, постобработки и производительности. Пригодится, когда агент пишет 3D на React. CX Codex +1 1 000установок threejs-loaders CloudAI-X Скилл обучает ИИ загружать 3D-модели glTF, текстуры и HDR-карты в three.js r186. Пригодится при настройке ассетов, цветовых пространств и шкалы прогресса для WebGL или WebGPU. CX Codex +1 12 900установок react-three-fiber freshtechbro Скилл обучает агента строить декларативные 3D-сцены в React через Three.js, настраивать хуки рендера и загружать модели через Suspense. CX Codex +1 3 800установок threejs-animation iart-ai Скилл для ИИ-кодинга, который помогает писать анимацию Three.js и React Three Fiber: сцены, GLTF-клипы, камера по скроллу, инстансинг. CX Codex +1 1 400установок git-city-3d-github-visualization reason-machines Скилл для работы над Git City — проектом, где профиль GitHub превращается в здание в 3D-городе на Next.js и Three.js. CX Codex +1 1 300установок threejs-webgl freshtechbro Скилл учит агента настраивать сцены Three.js, рендереры WebGL и WebGPU, свет, материалы и загрузку glTF-моделей. Пригодится для 3D-визуализаций и конфигураторов. CX Codex +1 4 600установок

Из того же набора3

r3f-interaction Настраивает события указателя, выбор объектов, перетаскивание и управление камерой в React Three Fiber. Помогает связать ввод мыши и клавиатуры без конфликтов между контроллерами сцены. CX Codex +1 3 300установок r3f-materials Помогает настроить PBR-поверхности и прозрачность в React Three Fiber. Предотвращает ошибки с цветовыми пространствами текстур и лишней нагрузкой на видеокарту. CX Codex +1 1 900установок