Agent skill
audio-router
Router for audio domain including playback, analysis, and audio-reactive visuals. Use when implementing any audio functionality including music, sound effects, visualizers, or audio-driven animations. Routes to 3 specialized skills.
Install this agent skill to your Project
npx add-skill https://github.com/Bbeierle12/Skill-MCP-Claude/tree/main/skills/audio-router
SKILL.md
Audio Router
Routes to 3 specialized skills based on audio requirements.
Routing Protocol
- Classify — Identify audio task from user request
- Match — Apply signal matching rules below
- Combine — Audio-visual projects need 2-3 skills together
- Load — Read matched SKILL.md files before implementation
Quick Route
Tier 1: Core Skills
| Need | Skill | Signals |
|---|---|---|
| Playing audio, music, SFX | audio-playback |
play, load, music, sound, mp3, transport, player, loop |
| Extracting audio data | audio-analysis |
FFT, frequency, spectrum, amplitude, waveform, beat detection |
| Visual-audio connection | audio-reactive |
visualizer, reactive, respond to audio, sync, pulse, beat-driven |
Signal Matching
Primary Signals
audio-playback:
- "play audio", "load music", "sound effect"
- "Tone.js", "Player", "transport"
- "loop", "crossfade", "volume"
- "schedule", "timing", "sync to beat"
- "background music", "ambient sound"
audio-analysis:
- "FFT", "frequency", "spectrum"
- "beat detection", "amplitude"
- "waveform", "audio data"
- "frequency bands", "bass", "treble"
- "analyze", "extract", "measure"
audio-reactive:
- "visualizer", "audio reactive"
- "respond to music", "sync visuals"
- "pulse on beat", "frequency to color"
- "music driven", "audio visualization"
- "bloom on bass", "particles on beat"
Confidence Scoring
- High (3+ signals) — Route directly to matched skill
- Medium (1-2 signals) — Route with supporting skills
- Low (0 signals) — Start with
audio-playback
Common Combinations
Simple Audio Player (1 skill)
audio-playback → Load and play audio files
Audio Visualizer (3 skills)
audio-playback → Load and control audio
audio-analysis → Extract frequency/beat data
audio-reactive → Map data to visual properties
Background Music (1-2 skills)
audio-playback → Looping, crossfade, volume
audio-analysis → Optional: beat sync features
Beat-Synced Animation (2-3 skills)
audio-analysis → Beat detection
audio-reactive → Trigger animations on beat
audio-playback → Control playback
Decision Table
| Task | Primary Skill | Supporting Skills |
|---|---|---|
| Play music file | playback | - |
| Loop ambient sound | playback | - |
| Create visualizer | reactive | playback + analysis |
| Detect beats | analysis | playback |
| Pulse on bass | reactive | analysis + playback |
| Frequency spectrum display | analysis | playback |
| Sound effects | playback | - |
| Audio-reactive particles | reactive | analysis + playback |
| Volume meter | analysis | playback |
Integration with Other Domains
With Post-Processing (postfx-*)
audio-analysis → Bass/high frequency data
audio-reactive → Mapping strategy
postfx-bloom → Audio-reactive glow intensity
postfx-effects → Audio-reactive chromatic aberration
Audio drives post-processing parameters.
With Particles (particles-*)
audio-analysis → Beat detection, energy levels
audio-reactive → Emission rate mapping
particles-systems → Particle emitter configuration
Beats trigger particle bursts, energy controls speed.
With GSAP (gsap-*)
audio-analysis → Beat detection
audio-reactive → Timeline control
gsap-sequencing → Beat-synced timeline
Audio events trigger or scrub GSAP timelines.
With R3F (r3f-*)
audio-playback → Audio context in React
audio-analysis → Data extraction
audio-reactive → Update Three.js objects
r3f-fundamentals → Scene/mesh setup
Audio data animates 3D scene properties.
With Shaders (shaders-*)
audio-analysis → Frequency uniforms
audio-reactive → Uniform update strategy
shaders-uniforms → Pass audio data to shaders
FFT data becomes shader uniforms for custom effects.
Workflow Patterns
Visualizer Development
1. audio-playback → Set up player and audio context
2. audio-analysis → Configure analyzers and band extraction
3. audio-reactive → Map frequencies to visual properties
Beat-Reactive Experience
1. audio-playback → Load audio
2. audio-analysis → Configure beat detection
3. audio-reactive → Define beat response animations
Ambient Soundscape
1. audio-playback → Looping players, crossfade
(Single skill usually sufficient)
Temporal Collapse Stack
For the New Year countdown audio experience:
audio-playback → Cosmic ambient loop, countdown ticks, celebration
audio-analysis → Beat detection, bass/mid/high extraction
audio-reactive → Map to bloom, particles, digit glow, vignette
Key features:
- Background cosmic ambient audio (looped)
- Tick sound per second (intensifies in final 10)
- Beat detection for particle bursts
- Bass → bloom intensity
- High frequencies → chromatic aberration
- Celebration music at zero
Quick Reference
Task → Skills
| Task | Skills Needed |
|---|---|
| "Play background music" | playback |
| "Loop ambient sound" | playback |
| "Crossfade between tracks" | playback |
| "Show frequency spectrum" | analysis + playback |
| "Detect beats in music" | analysis + playback |
| "Make visuals react to audio" | reactive + analysis + playback |
| "Pulse element on beat" | reactive + analysis |
| "Audio-reactive bloom" | reactive + analysis |
| "Sound effects on events" | playback |
Audio Library Quick Reference
| Library | Use Case |
|---|---|
| Tone.js | Full audio synthesis, analysis, effects |
| Howler.js | Simple playback, sprites, mobile |
| Web Audio API | Low-level, custom processing |
Common Frequency Bands
| Band | Range | Visual Use |
|---|---|---|
| Sub-bass | 20-60 Hz | Deep pulses, rumble |
| Bass | 60-250 Hz | Scale, intensity, beat |
| Low-mid | 250-500 Hz | Background motion |
| Mid | 500-2000 Hz | General energy |
| High-mid | 2000-4000 Hz | Detail, sparkle |
| High | 4000+ Hz | Shimmer, aberration |
Fallback Behavior
- No specific signals → Start with
audio-playback - "Visualizer" mentioned → Full stack: all three skills
- "React to music" →
audio-reactive+audio-analysis - Just playing audio →
audio-playbackonly - Performance concerns → Focus on
audio-analysisoptimization
Performance Priority
When performance is critical:
audio-analysis— Use smaller FFT size (64-128)audio-reactive— Apply smoothing to reduce jitteraudio-playback— Preload audio, reuse players
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
r3f-materials
Three.js materials in R3F, built-in materials (Standard, Physical, Basic, etc.), ShaderMaterial with custom GLSL, uniforms binding and animation, and material properties. Use when choosing materials, creating custom shaders, or binding dynamic uniforms.
case-studies-reference
Game building mechanics case studies and decision frameworks. Use when designing building systems, evaluating trade-offs, or learning from existing games. Reference-only skill with detailed analysis of Fortnite, Rust, Valheim, Minecraft, No Man's Sky, and Satisfactory building systems.
brainstorming
Use when starting any feature, project, or design work. Guides collaborative design refinement through incremental questioning before any code is written.
shader-router
Decision framework for GLSL shader projects. Routes to specialized shader skills (fundamentals, noise, SDF, effects) based on task requirements. Use when starting a shader project or needing guidance on which shader techniques to combine.
audio-playback
Audio playback using Tone.js including players, transport, scheduling, and loading audio. Use when implementing background music, sound effects, audio synchronization, or timed audio events. Essential for any audio-enabled web application.
doc-coauthoring
Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.
Didn't find tool you were looking for?