r3f-postprocessing — Claude Code skill for R3F postprocessing
A skill that walks the agent through postprocessing in React Three Fiber: glow on chosen meshes, depth of field, SSAO. Useful when the render looks off and you cannot pin down why.
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-codeWhat r3f-postprocessing does
The skill covers the WebGL pipeline: which composer to reach for, how selection ties into effects, and what happens to color after the scene is drawn. It ships a working example built on EffectComposer, Selection and SelectiveBloom. Two boxes glow equally in the scene, yet the bloom pass picks up only the selected one.
Ownership of the final frame is spelled out. Running a manual gl.render next to the composer overwrites or doubles the output. Depth of field gets its own note: target is a world-space point, not a mesh reference, and focusDistance={0} is not autofocus. SSAO will not run unless enableNormalPass is set on EffectComposer.
Versions matter. The sample assumes Fiber 9.7 with React 19, @react-three/postprocessing 3.1 and postprocessing 6.39. Piling on whatever newer packages are current, or quietly bumping a project, is what the skill tells you not to do. Check peer dependencies of the renderer you actually have.
Verification is concrete: switch effects on and off, pick an object, resize, unmount and mount again under Strict Mode. TypeScript cannot vouch for the final color or for selected-only behavior.
What it helps with
- Make only the clicked object glow while its neighbors stay dark
- Place effects in the right order around tone mapping
- Work out why DepthOfField ignores the point you aimed at
- Add SSAO without losing ambient occlusion to a missing normal pass
- Stop a second render call from clobbering the composer output
Example prompts for the agent
- Set up an
EffectComposerscene where bloom comes only from the object under the cursor - Add SSAO to the pipeline and turn on
enableNormalPassforEffectComposer - Configure
DepthOfFieldso focus lands on the far box
How to install r3f-postprocessing
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-code2Manually: put the files in place
~/.claude/skills/r3f-postprocessing/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/r3f-postprocessing/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a codex2Manually: put the files in place
.agents/skills/r3f-postprocessing/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a cursor2Manually: put the files in place
.cursor/skills/r3f-postprocessing/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install EnzeD/r3f-skills r3f-postprocessing2Manually: put the files in place
.github/skills/r3f-postprocessing/SKILL.md1Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a gemini-cli2Platform CLI
gemini skills install https://github.com/EnzeD/r3f-skills --path skills/r3f-postprocessingManually: put the files in place
.devin/skills/r3f-postprocessing/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about r3f-postprocessing
How do I install r3f-postprocessing in Claude Code?
Run npx skills add EnzeD/r3f-skills --skill r3f-postprocessing -a claude-code, then confirm the file sits at ~/.claude/skills/r3f-postprocessing/SKILL.md.
What does r3f-postprocessing do?
It guides the agent through setting up postprocessing effects in React Three Fiber: bloom, object selection, ambient occlusion and depth of field. It targets composer pipelines rather than material shaders on a mesh.
Does it cover the WebGPU renderer in Three.js?
No. The composer described here is WebGL-only. Three.js WebGPURenderer needs node effects and RenderPipeline instead, and that backend has to be checked on its own.
