React Three Fiber Skills

Q: Как поставить скиллы React Three Fiber в Claude Code?

Выполните npx skills add EnzeD/r3f-skills. Менеджер даст выбрать нужные скиллы и агентов. Вручную копируйте папки скиллов вместе с подпапками references/.

Q: Как автор проверяет примеры?

Команда npm run check проверяет заголовки и ссылки скиллов и типы всех 18 примеров на TypeScript. npm run test:browser рендерит 11 основных примеров в Chromium со сгенерированными ассетами.

Q: Какие библиотеки покрывают скиллы?

React Three Fiber, drei, three, Rapier для физики и пакет постобработки. Рецепты с WebGPU и TSL необязательны, браузерные проверки идут на WebGL.

r3f-skills

Одиннадцать независимых скиллов по React Three Fiber 9: сцена, свет, материалы, физика Rapier, шейдеры и постобработка

136 ★ репозитория
Последний коммит 31 авг. 2026

Скилл

enzed/r3f-skillsАвтор:EnzeD

Установка

Работает в: Claude Code
Codex
Koda
Coddy

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/r3f-skills

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

Скиллы только дают инструкции и примеры кода, сами ничего не запускают

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Набор из 11 скиллов учит агента собирать 3D-сцены на React Three Fiber с актуальными API. Скиллы закрывают основы Canvas и хуков, геометрию и инстансинг, материалы и прозрачность, свет и тени, текстуры и цветовые пространства, загрузчики ассетов, анимацию, шейдеры на GLSL и по желанию TSL, постобработку, события указателя и физику Rapier. В каждом `SKILL.md` лежат решения, типичные ошибки и один проверенный пример, а крупные рецепты вынесены в папку `references/` скилла и подгружаются по необходимости. Перед выбором API агенту велено посмотреть версии в манифесте проекта, а не подгонять код под рецепт. Автор сверил набор 31 августа 2026 года с Fiber 9.7.0, React 19.2.8, three r185, `drei` 10.7.8 и Rapier 2.2.0. Все 18 примеров на TypeScript проходят проверку типов, а 11 основных рендерятся в Chromium при проверке.

Для кого. Фронтенд-разработчикам на React 19, которые делают 3D-сцены и конфигураторы и хотят, чтобы агент не путал версии Fiber, drei и three.

Подходит, если

Агент генерирует код под Fiber 8 и React 18, а в проекте стоят Fiber 9 и React 19
Сцена тормозит из-за множества одинаковых мешей, и пора переходить на инстансинг
Нужны выделенное свечение и контроль цветового вывода в постобработке
3D-модель надо загрузить с Suspense, декодерами и кэшем без утечек памяти
В сцену добавляется физика Rapier с коллайдерами, суставами и шагами симуляции

Не подходит, если

Проект на чистом Three.js без React: скиллы описывают Fiber и его хуки
Стек остался на Fiber 8 и React 18: автор такую пару не тестировал, API Fiber 10 в альфа-версии исключены
Нужна сертификация под WebGPU: браузерные проверки автора идут на WebGL

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

Добавь в сцену 500 одинаковых кубов через инстансинг, подсвети выбранный курсором и подключи выборочное свечение

Ограничения

Рецепты привязаны к Fiber 9 и React 19, пара Fiber 8 и React 18 остается отдельным старым вариантом и фикстурами не тестируется. Рецепты WebGPU и TSL необязательные: типы проверены, а браузерные проверки идут на WebGL и совместимость с WebGPU не подтверждают. Совместимый диапазон версий не гарантирует, что работает любая комбинация функций. Для запуска собственных проверок нужны Node.js 22.12 и публичный реестр npm, а для самих скиллов зависимости репозитория не нужны. В репозитории не указана лицензия в метаданных GitHub, но README называет код MIT.

Как отключить. Удалите папки нужных скиллов `r3f-*` из каталога скиллов агента или снимите их менеджером `skills`. Код вашего проекта остается без изменений.

Частые вопросы

Как поставить скиллы React Three Fiber в Claude Code?

Выполните `npx skills add EnzeD/r3f-skills`. Менеджер даст выбрать нужные скиллы и агентов. Вручную копируйте папки скиллов вместе с подпапками `references/`.

Нужно ли ставить все 11 скиллов сразу?

Нет, каждый скилл ставится отдельно. Описания помогают агенту выбрать подходящий, и дополнительные справочные файлы он подгружает только по теме.

Работают ли скиллы с Fiber 8?

Автор не тестировал стек Fiber 8 и React 18 и считает его отдельной старой парой. Для такого проекта сверяйте каждый рецепт с версиями в манифесте.

Как автор проверяет примеры?

Команда `npm run check` проверяет заголовки и ссылки скиллов и типы всех 18 примеров на TypeScript. `npm run test:browser` рендерит 11 основных примеров в Chromium со сгенерированными ассетами.

Какие библиотеки покрывают скиллы?

React Three Fiber, `drei`, `three`, Rapier для физики и пакет постобработки. Рецепты с WebGPU и TSL необязательны, браузерные проверки идут на WebGL.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Three.js Skills

Десять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка

СкиллМинимальный доступ4,2 тыс.

WebGL Animation Skills

Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.

ПлагинМинимальный доступ54

Three.js Awesome Graphics Skills

threejs-awesome-graphics-agent-skills

Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы

СкиллМинимальный доступ990

vue-skills

Набор скиллов для разработки на Vue 3: практики Composition API, роутер, Pinia, тесты, JSX, Options API и разбор ошибок

СкиллМинимальный доступ3,3 тыс.

Open 3D Skills

Восемь скиллов для 3D и анимированных сайтов: сцены three.js из кода, скролл-фильмы, прозрачное видео, разбор машин на детали

СкиллРасширенный доступ353

julianromli/ai-skills

ai-skills

Сборник из 31 скилла для Claude Code и других агентов: интерфейсы, React, Postgres, код-ревью, SEO и браузерная автоматизация

СкиллРасширенный доступ219

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

Инструмент	Официальный	Звезды репозитория	Главное отличие
React Three Fiber Skills (эта карточка)	нет	136
Three.js Skills	нет	4 168	справочные скиллы по чистому Three.js, а здесь React Three Fiber 9 с проверенными по версиям примерами
WebGPU Three.js TSL Skill	нет	1 281	скилл про WebGPU и TSL, а здесь WebGL как основа и TSL только по желанию

Коротко о README

README перечисляет 11 скиллов с тематикой каждого, команду установки и таблицу проверенных версий пакетов. Дальше описаны команды проверки структуры, типов и браузерного рендера, сравнение версий с релизами npm и правила для вкладов: удалять общие учебники в пользу решений и источников.

Бейдж для README

Исходный SKILL.md

---
name: r3f-fundamentals
description: Set up React Three Fiber scenes, Canvas, typed JSX, hooks, and resource ownership. Use for scene architecture and render-loop setup, rather than detailed materials or effects.
---

# React Three Fiber fundamentals

## Choose the right baseline

- Inspect the project's manifest and lockfile before selecting APIs. These examples target Fiber 9 / React 19; Fiber 8 pairs with React 18. Do not upgrade a project just to match a recipe.
- Check installed Three.js and Drei versions too. Use released documentation matching those versions; if unavailable, state the uncertainty instead of inventing props.
- Keep the existing renderer unless the task calls for changing it. For WebGPU, read [renderer selection](references/renderers.md); Fiber 10 alpha APIs are not Fiber 9 APIs.

## Minimal scene

This example owns its Canvas. Its parent must have a nonzero height.

```tsx
import { useRef } from 'react'
import { Canvas, useFrame, type ThreeElements } from '@react-three/fiber'
import type { Mesh } from 'three'

function RotatingBox(props: ThreeElements['mesh']) {
  const mesh = useRef<Mesh>(null)
  useFrame((_, delta) => {
    if (mesh.current) mesh.current.rotation.y += delta * 0.5
  })
  return (
    <mesh {...props} ref={mesh}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="coral" />
    </mesh>
  )
}

export default function Example() {
  return (
    <Canvas camera={{ position: [0, 0, 5] }} dpr={[1, 2]}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[3, 4, 5]} intensity={2} />
      <RotatingBox />
    </Canvas>
  )
}
```

Сообщить о проблеме