Post-Processing Router
Routes to 3 specialized skills based on post-processing requirements.
Routing Protocol
- Classify — Identify effect type from user request
- Match — Apply signal matching rules below
- Combine — Most production scenes need 2-3 skills together
- 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
1---2name: postfx-router3description: 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.4---5
6# Post-Processing Router
7
8Routes to 3 specialized skills based on post-processing requirements.
9
10## Routing Protocol
11
121. **Classify** — Identify effect type from user request
132. **Match** — Apply signal matching rules below
143. **Combine** — Most production scenes need 2-3 skills together
154. **Load** — Read matched SKILL.md files before implementation
16
17## Quick Route
18
19### Tier 1: Core (Start Here)
20| Need | Skill | Signals |
21|------|-------|---------|
22| Pipeline setup, effect ordering | `postfx-composer` | EffectComposer, setup, pipeline, render target, custom pass, multi-pass |
23| Glow, luminance effects | `postfx-bloom` | bloom, glow, neon, emissive, luminance, UnrealBloom, selective bloom |
24| Cinematic polish, color | `postfx-effects` | vignette, chromatic, DOF, grain, color grade, LUT, aberration |
25
26## Signal Matching
27
28### Primary Signals
29
30**postfx-composer** (always start here for new projects):
31- "set up post-processing"
32- "configure effect pipeline"
33- "create custom effect/pass"
34- "render targets", "effect ordering"
35
36**postfx-bloom**:
37- "bloom", "glow", "luminance", "neon", "emissive"
38- "selective bloom", "object glow", "UnrealBloomPass"
39
40**postfx-effects**:
41- "chromatic aberration", "vignette", "depth of field", "DOF"
42- "film grain", "noise", "color grading", "LUT", "tone mapping"
43- "scanlines", "CRT", "god rays"
44
45### Confidence Scoring
46
47- **High (3+ signals)** — Route directly to matched skill
48- **Medium (1-2 signals)** — Route with composer as foundation
49- **Low (0 signals)** — Start with `postfx-composer` for setup
50
51## Common Combinations
52
53### Basic Post-Processing Setup (2 skills)
54```
55postfx-composer → Pipeline architecture, effect ordering
56postfx-bloom → Basic glow effects
57```
58
59### Cinematic Scene (3 skills)
60```
61postfx-composer → Pipeline setup, tone mapping
62postfx-bloom → Subtle glow on lights
63postfx-effects → Vignette, grain, color grading
64```
65
66### Neon/Cyberpunk Aesthetic (2 skills)
67```
68postfx-bloom → High-intensity selective bloom
69postfx-effects → Chromatic aberration, vignette
70```
71
72### Custom Effect Development (1-2 skills)
73```
74postfx-composer → Custom Effect class, shader writing
75postfx-effects → Reference existing effects
76```
77
78## Decision Table
79
80| Effect Type | Complexity | Primary Skill | Supporting Skill |
81|-------------|------------|---------------|------------------|
82| Glow/bloom only | Simple | bloom | composer |
83| Cinematic look | Medium | effects | composer + bloom |
84| Custom effect | Complex | composer | - |
85| Selective bloom | Medium | bloom | composer |
86| Color grading | Simple | effects | composer |
87| Full production | Complex | All three | - |
88
89## Effect Categories
90
91### Lighting Effects → postfx-bloom
92- Bloom/glow, selective bloom, emissive enhancement, HDR luminance
93
94### Camera Effects → postfx-effects
95- Chromatic aberration, vignette, depth of field, lens distortion
96
97### Color Effects → postfx-effects
98- Tone mapping, color grading, LUT, hue/saturation
99
100### Texture Effects → postfx-effects
101- Film grain, noise, scanlines, CRT
102
103### Architecture → postfx-composer
104- EffectComposer setup, effect ordering, custom effects, render targets
105
106## Integration with Other Domains
107
108### With R3F (r3f-*)
109```
110r3f-fundamentals → Scene setup
111postfx-composer → Effect pipeline
112postfx-bloom → Object glow
113```
114
115### With Shaders (shaders-*)
116```
117shaders-glsl → Custom effect shader code
118postfx-composer → Wrap in Effect class
119```
120
121### With Particles (particles-*)
122```
123particles-systems → Particle emitters
124postfx-bloom → Particle glow
125postfx-effects → Atmosphere
126```
127
128### With Audio (audio-*)
129```
130audio-analysis → Frequency data
131postfx-bloom → Audio-reactive bloom
132postfx-effects → Audio-reactive aberration
133```
134
135## Quick Reference
136
137| Effect | Skill |
138|--------|-------|
139| Bloom | `postfx-bloom` |
140| Selective Bloom | `postfx-bloom` |
141| Vignette | `postfx-effects` |
142| Chromatic Aberration | `postfx-effects` |
143| Depth of Field | `postfx-effects` |
144| Film Grain/Noise | `postfx-effects` |
145| Color Grading | `postfx-effects` |
146| LUT | `postfx-effects` |
147| Tone Mapping | `postfx-effects` |
148| Custom Effects | `postfx-composer` |
149| Render Targets | `postfx-composer` |
150
151## Temporal Collapse Stack
152
153```
154postfx-composer → HDR pipeline, tone mapping, adaptive quality
155postfx-bloom → Cosmic glow on digits, particles, UI
156postfx-effects → Vignette (void edge), subtle chromatic, grain
157```
158
159## Fallback Behavior
160
161- **No framework context** → Assume @react-three/postprocessing
162- **Unclear effect type** → Start with `postfx-composer` + `postfx-bloom`
163- **Performance concerns** → Prioritize `postfx-composer` optimization patterns
majiayu000