Bbeierle12

postfx-router

4
0
# Install this skill:
npx skills add Bbeierle12/Skill-MCP-Claude --skill "postfx-router"

Install specific skill from multi-skill repository

# Description

Router for Three.js post-processing effects domain. Use when implementing visual effects like bloom, glow, chromatic aberration, vignette, depth of field, color grading, or any screen-space effects. Routes to 3 specialized skills for bloom, effects, and composer setup.

# SKILL.md


name: postfx-router
description: Router for Three.js post-processing effects domain. Use when implementing visual effects like bloom, glow, chromatic aberration, vignette, depth of field, color grading, or any screen-space effects. Routes to 3 specialized skills for bloom, effects, and composer setup.


Post-Processing Router

Routes to 3 specialized skills based on post-processing requirements.

Routing Protocol

  1. Classify β€” Identify effect type from user request
  2. Match β€” Apply signal matching rules below
  3. Combine β€” Most production scenes need 2-3 skills together
  4. Load β€” Read matched SKILL.md files before implementation

Quick Route

Tier 1: Core (Start Here)

Need Skill Signals
Pipeline setup, effect ordering postfx-composer EffectComposer, setup, pipeline, render target, custom pass, multi-pass
Glow, luminance effects postfx-bloom bloom, glow, neon, emissive, luminance, UnrealBloom, selective bloom
Cinematic polish, color postfx-effects vignette, chromatic, DOF, grain, color grade, LUT, aberration

Signal Matching

Primary Signals

postfx-composer (always start here for new projects):
- "set up post-processing"
- "configure effect pipeline"
- "create custom effect/pass"
- "render targets", "effect ordering"

postfx-bloom:
- "bloom", "glow", "luminance", "neon", "emissive"
- "selective bloom", "object glow", "UnrealBloomPass"

postfx-effects:
- "chromatic aberration", "vignette", "depth of field", "DOF"
- "film grain", "noise", "color grading", "LUT", "tone mapping"
- "scanlines", "CRT", "god rays"

Confidence Scoring

  • High (3+ signals) β€” Route directly to matched skill
  • Medium (1-2 signals) β€” Route with composer as foundation
  • Low (0 signals) β€” Start with postfx-composer for setup

Common Combinations

Basic Post-Processing Setup (2 skills)

postfx-composer β†’ Pipeline architecture, effect ordering
postfx-bloom    β†’ Basic glow effects

Cinematic Scene (3 skills)

postfx-composer β†’ Pipeline setup, tone mapping
postfx-bloom    β†’ Subtle glow on lights
postfx-effects  β†’ Vignette, grain, color grading

Neon/Cyberpunk Aesthetic (2 skills)

postfx-bloom    β†’ High-intensity selective bloom
postfx-effects  β†’ Chromatic aberration, vignette

Custom Effect Development (1-2 skills)

postfx-composer β†’ Custom Effect class, shader writing
postfx-effects  β†’ Reference existing effects

Decision Table

Effect Type Complexity Primary Skill Supporting Skill
Glow/bloom only Simple bloom composer
Cinematic look Medium effects composer + bloom
Custom effect Complex composer -
Selective bloom Medium bloom composer
Color grading Simple effects composer
Full production Complex All three -

Effect Categories

Lighting Effects β†’ postfx-bloom

  • Bloom/glow, selective bloom, emissive enhancement, HDR luminance

Camera Effects β†’ postfx-effects

  • Chromatic aberration, vignette, depth of field, lens distortion

Color Effects β†’ postfx-effects

  • Tone mapping, color grading, LUT, hue/saturation

Texture Effects β†’ postfx-effects

  • Film grain, noise, scanlines, CRT

Architecture β†’ postfx-composer

  • EffectComposer setup, effect ordering, custom effects, render targets

Integration with Other Domains

With R3F (r3f-*)

r3f-fundamentals β†’ Scene setup
postfx-composer  β†’ Effect pipeline
postfx-bloom     β†’ Object glow

With Shaders (shaders-*)

shaders-glsl     β†’ Custom effect shader code
postfx-composer  β†’ Wrap in Effect class

With Particles (particles-*)

particles-systems β†’ Particle emitters
postfx-bloom      β†’ Particle glow
postfx-effects    β†’ Atmosphere

With Audio (audio-*)

audio-analysis    β†’ Frequency data
postfx-bloom      β†’ Audio-reactive bloom
postfx-effects    β†’ Audio-reactive aberration

Quick Reference

Effect Skill
Bloom postfx-bloom
Selective Bloom postfx-bloom
Vignette postfx-effects
Chromatic Aberration postfx-effects
Depth of Field postfx-effects
Film Grain/Noise postfx-effects
Color Grading postfx-effects
LUT postfx-effects
Tone Mapping postfx-effects
Custom Effects postfx-composer
Render Targets postfx-composer

Temporal Collapse Stack

postfx-composer β†’ HDR pipeline, tone mapping, adaptive quality
postfx-bloom    β†’ Cosmic glow on digits, particles, UI
postfx-effects  β†’ Vignette (void edge), subtle chromatic, grain

Fallback Behavior

  • No framework context β†’ Assume @react-three/postprocessing
  • Unclear effect type β†’ Start with postfx-composer + postfx-bloom
  • Performance concerns β†’ Prioritize postfx-composer optimization patterns

# Supported AI Coding Agents

This skill is compatible with the SKILL.md standard and works with all major AI coding agents:

Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.