Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
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
- 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-composerfor 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-composeroptimization 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.