bbeierle12/skill-mcp-claude
Overview
This skill is a router for Three.js post-processing effects that directs requests to the right specialized skill for bloom, general effects, or composer/pipeline setup. It simplifies decision-making when implementing screen-space effects like bloom, chromatic aberration, vignette, DOF, and color grading. Use it to map high-level intent to focused implementations and common skill combinations.
How this skill works
It classifies incoming requests by detecting key signals (e.g., "bloom", "vignette", "effect composer") and matches them to one of three target skills: composer, bloom, or effects. It applies simple confidence scoring (high/medium/low) based on number of signals and suggests combining skills when scenes need multiple layers. It also provides fallback guidance and common combinations for production-ready pipelines.
When to use it
- Starting a new post-processing pipeline or ordering effects
- Adding glow/luminance or selective bloom to a scene
- Applying cinematic touches: vignette, grain, color grading, DOF
- Creating custom passes or writing an Effect class/shader
- Optimizing or structuring multiple screen-space effects together
Best practices
- Always start new projects with the composer route to define ordering and render targets
- Combine 2–3 skills for production scenes (composer + bloom + effects) rather than many isolated passes
- Use signal counts: 3+ signals → direct route; 1–2 signals → route via composer; 0 signals → default to composer
- Prefer selective bloom for object-specific glow to limit performance cost
- When performance is a concern, prioritize composer optimizations (render target formats, adaptive quality) before adding expensive effects
Example use cases
- Basic pipeline: use postfx-composer for EffectComposer setup, then postfx-bloom for soft glow
- Cinematic scene: composer for tone mapping, bloom for emissive highlights, effects for vignette and film grain
- Neon/cyberpunk: postfx-bloom for high-intensity selective bloom plus postfx-effects for chromatic aberration
- Custom effect development: composer to wrap a custom Effect class and shader; consult effects skill for reference implementations
- Audio-reactive visuals: feed frequency data to bloom and aberration for synchronized glow and color shifts
FAQ
When signals are absent or unclear, route to postfx-composer first to establish pipeline and then add bloom or effects as needed.
Can I use multiple skills together?
Yes — common production patterns combine composer + bloom + effects. The router recommends combinations and ordering to avoid conflicts and performance issues.
40 skills
This skill routes and configures post-processing effects for Three.js scenes, optimizing the pipeline and coordinating bloom, effects, and composer setup.
This skill orchestrates multiple domain routers for immersive 3D visuals, shaders, particles, and audio to deliver cohesive experiences.
This skill routes audio tasks by classifying requests, matching signals, and coordinating playback, analysis, and reactive visuals for audio projects.
This skill helps you create engaging scroll-driven animations using GSAP ScrollTrigger, enabling pinning, scrubbing, snapping and parallax effects.
This skill routes GLSL shader tasks to core or specialized skills, guiding you to combine fundamentals, noise, sdf, and effects for polished results.
This skill helps you implement GSAP animations efficiently by routing fundamentals, sequencing, scroll-based, and React patterns for cohesive UI experiences.
This skill helps you learn and apply core GSAP animation concepts like tweens, timelines, and easing to create smooth web animations.
This skill helps you generate and optimize GLSL procedural noise setups for realistic textures, terrain, clouds, and fluids with versatile noise types.
This skill streamlines building production-ready React forms using React Hook Form with Zod, plus TanStack Form options for cross-framework and advanced
This skill helps you create interactive D3.js charts and visualizations, enabling engaging, data-driven graphics across bar, line, pie, and geographic charts.
This skill helps you orchestrate complex GSAP timelines with labels, nested timelines, and position controls for cinematic UI choreography.
This skill generates and explains signed distance function shaders for 2D/3D shapes, blending, repetition, and raymarching to create procedural visuals.
This skill helps you add polished visual shader effects such as glow, bloom, vignettes, and chromatic aberration to enhance rendering.
This skill helps you master GLSL shader fundamentals, enabling you to write vertex and fragment shaders, manage uniforms, varyings, and coordinate spaces.
This skill helps you design and deploy scalable AWS infrastructure using CDK patterns, serverless architectures, and cost-aware security with best practices.
This skill simplifies GSAP animations in React by providing useGSAP hooks, scoped refs, cleanup, and context utilities for reliable lifecycle handling.
This skill optimizes r3f render performance through instancing, LOD, frustum culling, and lazy loading to sustain smooth frames.
This skill helps you integrate terrain-aware foundations and slope handling in Three.js builds, auto-leveling and pillar generation for stable ground contact.
This skill helps simulate realistic particle motion by applying gravity, wind, drag, attractors, turbulence, and collisions for dynamic visuals.
This skill analyzes audio with FFT, waveform, and meter data to drive visuals and reactive effects.
This skill helps you design robust software architectures by applying SOLID, Clean Architecture, and common patterns to structure systems and reviews.
This skill routes building mechanics through focused sub-skills to optimize performance, physics, multiplayer, terrain, decay, and UX in Three.js projects.
This skill generates comprehensive scientific documentation for coding projects in Word format, explaining decisions, techniques, and code clearly for
This skill helps you create and optimize 3D geometry in React Three Fiber, enabling custom shapes, efficient instancing, and direct vertex manipulation.
This skill generates clear, executable implementation plans for developers, outlining tasks, tests, and verification to ensure rapid, reliable delivery.
This skill helps you bind audio analysis to visuals, providing smooth mappings, beat responses, and dynamic frequency-driven effects for reactive visuals.
This skill enforces React/TypeScript frontend guidelines, optimizing structure, data fetching, styling, routing, and performance for maintainable components.
This skill provides production-ready Vue 3 form patterns using VeeValidate with Zod integration, enabling rapid, reliable form validation.
This skill helps you optimize large-scale building games by applying spatial indexing, chunking, and benchmarking to improve rendering and world loading.
This skill routes requests to multiple specialized skills by classifying, matching, and loading the best ensembles for production tasks.
This skill helps you build multi-step forms with cognitive chunking, progressive disclosure, and conditional fields to reduce cognitive load in checkout and
This skill helps you render thousands to millions of particles efficiently using GPU instancing, custom shaders, and Points geometry for high-performance
This skill implements server-authoritative multiplayer building networking with client prediction, delta synchronization, and conflict resolution to ensure
This skill validates structural stability and handles damage propagation for building systems in Three.js games, supporting arcade, heuristic, and realistic
This skill helps you manage particle birth, life, and death with emission, pooling, trails, and color/size changes for memory-efficient effects.
This skill enhances 3D scenes with cinematic post-processing effects like chromatic aberration, vignette, and color grading for mood and storytelling.
This skill routes particle tasks to GPU, physics, and lifecycle specialists, delivering recommended combinations for optimal effects.
This skill provides a complete 3D building system with spatial indexing, structural physics, and multiplayer synchronization to speed up survival game
This skill helps you design and optimize complex Three.js post-processing pipelines using EffectComposer, render targets, and custom passes.
This skill helps you implement post-processing bloom effects in Three.js with React Three Fiber, enabling neon, glow, and selective object bloom.
