Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

threejs-postprocessing · calesthio — Claude Code skill

This skill helps an agent add Three.js post-processing such as glow, blur, depth of field, and screen effects. Use it when building a scene’s visual pipeline.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add calesthio/OpenMontage --skill threejs-postprocessing -a claude-code
Open on GitHub

What threejs-postprocessing does

The skill explains how to set up EffectComposer with a RenderPass and extra passes for a Three.js scene. It covers bloom with UnrealBloomPass, FXAA or SMAA, SSAO, depth of field with BokehPass, film grain, vignette, color and gamma correction, pixelation, and glitch effects.

It also shows selective bloom with layers, temporary material replacement, and resize handling. The examples use modules from three/addons/postprocessing and three/addons/shaders. The animation loop must call composer.render() instead of renderer.render(), or the post-processing chain will be bypassed.

This is an instruction skill with code examples, not a ready-made visual preset. Pass settings still need to match the scene, camera, and intended effect.

What it helps with

  • add glow to selected scene objects
  • build a pass chain with EffectComposer
  • set up depth-of-field blur
  • connect FXAA or SMAA anti-aliasing
  • adjust the final frame’s color output

Example prompts for the agent

  • “Add `EffectComposer` with `RenderPass` and `UnrealBloomPass` to this Three.js scene, then replace the loop’s render call with `composer.render()`.”
  • “Set up selective bloom for objects on `BLOOM_LAYER` and restore their materials after the bloom pass.”
  • “Add `BokehPass` for depth of field and update `focus` from the distance to the target.”

How to install threejs-postprocessing

1Skills CLI (Vercel)

npx skills add calesthio/OpenMontage --skill threejs-postprocessing -a claude-code

2Manually: put the files in place

~/.claude/skills/threejs-postprocessing/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/threejs-postprocessing/

From the same set28

The whole set →
video-understand calesthio This skill extracts video frames and transcribes audio locally with ffmpeg and Whisper. Use it to inspect video content without API keys. Claude Code CX Codex Cursor +1 1,300installs remotion calesthio Teaches AI agents toolkit-specific Remotion patterns, including custom transition shaders and 30 fps video rules. Claude Code CX Codex Cursor +1 1,200installs video-download calesthio Uses yt-dlp to fetch video, audio, subtitles, or URL metadata. Use it when you need a local file, a selected resolution, or details without downloading media. Claude Code CX Codex Cursor +1 1,200installs lottie-bodymovin calesthio Applies Disney's 12 animation principles to Lottie vector animations. Bridges After Effects setup with runtime JavaScript controls. Claude Code CX Codex Cursor +1 1,100installs create-video calesthio This skill turns a description into a finished video: write what you want to see, and HeyGen generates the script, picks an avatar, adds voiceover and editing. Good for quick demos, explainers and promos without tweaking every detail. Claude Code CX Codex Cursor +1 1,100installs video-toolkit calesthio Automates video creation: generates voiceovers, background music, animates talking heads, and composes scenes with Remotion. Requires Node.js, Python3, ffmpeg, and cloud GPU access (Modal or RunPod). Claude Code CX Codex Cursor +1 1,100installs text-to-speech calesthio Generates speech audio with HeyGen Starfish and lets you choose a voice, speed, and pitch. Useful for voiceovers, narration, and podcasts. Claude Code CX Codex Cursor +1 1,100installs bfl-api Black Forest Labs This skill helps connect BFL FLUX API for image generation and editing. It covers async requests, polling, rate limits, and webhooks. Claude Code CX Codex Cursor +1 1,000installs

Other versions of threejs-postprocessing

threejs-postprocessing CloudAI-X A skill that adds post-processing pass chains to Three.js: bloom, depth of field, ambient occlusion, and custom screen shaders. Use it when you need visual effects, color grading, or blur on WebGL and WebGPU. Claude Code CX Codex Cursor +1 13,500installs

Similar

senior-fullstack sickn33 This skill guides implementation of features spanning interface, backend, database and deployment. It verifies coherence from request through authorization to data access and response handling. Claude Code CX Codex Cursor +1 2,300installs javascript-pro https://github.com/Jeffallan Skill for writing, debugging, and refactoring JavaScript code with ES2023+, async/await, ESM modules, and Node.js APIs. Use it to build vanilla JavaScript applications or optimize performance in browsers and Node.js. Claude Code CX Codex Cursor +1 6,000installs gpui-kit-design-guides longbridge Supplies normative desktop interface rules for GPUI Kit applications. Useful when creating new screens, styling components, or auditing UI against review checklists. Claude Code CX Codex Cursor +1 959installs sketch Hermes Agent (adapted from gsd-build/get-shit-done) Generates 2-3 HTML mockup variants to compare design directions before you commit to production code. Claude Code CX Codex Cursor +1 402installs unit-test-vue-pinia official github Writes and reviews unit tests for Vue 3, TypeScript, Vitest and Pinia code. Useful when your tests reach into component internals instead of behavior. GitHub Copilot 1,800installs nextjs-developer https://github.com/Jeffallan Configures Next.js 14+ application architecture using App Router, React Server Components, and Server Actions. Useful when setting up SSR streaming, SEO metadata, and Vercel deployments. Claude Code CX Codex Cursor +1 5,700installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about threejs-postprocessing

How do I install threejs-postprocessing in Claude Code?

Run npx skills add calesthio/OpenMontage --skill threejs-postprocessing -a claude-code, then run npx skills add calesthio/OpenMontage --skill threejs-postprocessing -a claude-code again. The skill file is at ~/.claude/skills/threejs-postprocessing/SKILL.md.

What does threejs-postprocessing do?

It guides the agent through adding EffectComposer and Three.js passes for bloom, DOF, SSAO, anti-aliasing, color correction, and other screen effects.

What must change in a Three.js render loop?

Once the composer is connected, the animation loop should call composer.render() instead of renderer.render(). Resize handling also updates the camera, renderer, composer, and anti-aliasing settings.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor