r3f-postprocessing — скилл для Claude Code: постобработка в R3F
Скилл подсказывает агенту, как собрать постобработку в React Three Fiber: блум по выбранным объектам, глубину резкости, SSAO. Пригодится, когда картинка в сцене не сходится с задумкой.
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-codeЧто делает r3f-postprocessing
Скилл разбирает пайплайн постобработки на WebGL: какой composer взять, как связать выбор объектов с эффектами, что делать с цветом после рендера. Внутри есть готовый пример с EffectComposer, Selection и SelectiveBloom — два одинаково ярких куба, но светится только тот, что выбран кликом.
Скилл прямо предупреждает: финальную сцену должен рисовать один владелец. Если рядом с EffectComposer вызвать gl.render вручную, результат перезапишется или задвоится. Про глубину резкости сказано отдельно: target — это точка в мире, а не ссылка на меш, и focusDistance={0} автфокусом не работает. Без enableNormalPass у EffectComposer эффект SSAO не запустится.
Ключевое ограничение — версии. Пример рассчитан на Fiber 9.7 и React 19 с @react-three/postprocessing 3.1 и postprocessing 6.39. Ставить поверх произвольные свежие версии пакетов или молча обновлять проект скилл не советует: сначала сверьте peer-зависимости установленного рендерера.
Проверка описана конкретно: включить и выключить эффекты, выделить объект, изменить размер окна, размонтировать и смонтировать заново под Strict Mode. TypeScript правильный цвет и поведение выделения не докажет.
Какие задачи решает
- Сделать так, чтобы светился только выбранный объект, а соседние оставались тёмными
- Подобрать порядок эффектов относительно tone mapping
- Разобраться, почему DepthOfField не фокусируется на нужной точке
- Включить SSAO и не потерять ambient occlusion из-за отсутствия normal pass
- Остановить двойной рендер, который ломает вывод compositor
Примеры запросов агенту
- Собери сцену на
EffectComposer, чтобы блум шёл только от объекта под курсором - Добавь в пайплайн SSAO и выставь
enableNormalPassуEffectComposer - Настрой
DepthOfFieldтак, чтобы резкость была на дальней коробке
Как установить r3f-postprocessing
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-code2Вручную: положить файлы
~/.claude/skills/r3f-postprocessing/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/r3f-postprocessing/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a codex2Вручную: положить файлы
.agents/skills/r3f-postprocessing/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a cursor2Вручную: положить файлы
.cursor/skills/r3f-postprocessing/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-postprocessing2Вручную: положить файлы
.github/skills/r3f-postprocessing/SKILL.md1Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a gemini-cli2Командой платформы
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-postprocessingВручную: положить файлы
.devin/skills/r3f-postprocessing/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о r3f-postprocessing
Как установить r3f-postprocessing в Claude Code?
Сначала выполните npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-code, затем проверьте, что файл лежит по пути ~/.claude/skills/r3f-postprocessing/SKILL.md.
Что делает r3f-postprocessing?
Помогает агенту настраивать эффекты постобработки в React Three Fiber: блум, выделение объекта, ambient occlusion и глубину резкости. Работает с composer-пайплайнами, а не с шейдерами материалов меша.
Подойдёт ли скилл для WebGPU-рендерера Three.js?
Нет, описанный composer — для WebGL. Для WebGPURenderer в Three.js нужны node-эффекты и RenderPipeline, этот бэкенд придётся проверять отдельно.
