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-playback only
- Performance concerns → Focus on
audio-analysis optimization
Performance Priority
When performance is critical:
audio-analysis — Use smaller FFT size (64-128)
audio-reactive — Apply smoothing to reduce jitter
audio-playback — Preload audio, reuse players
1---2name: audio-router3description: 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.4---5
6# Audio Router
7
8Routes to 3 specialized skills based on audio requirements.
9
10## Routing Protocol
11
121. **Classify** — Identify audio task from user request
132. **Match** — Apply signal matching rules below
143. **Combine** — Audio-visual projects need 2-3 skills together
154. **Load** — Read matched SKILL.md files before implementation
16
17## Quick Route
18
19### Tier 1: Core Skills
20| Need | Skill | Signals |
21|------|-------|---------|
22| Playing audio, music, SFX | `audio-playback` | play, load, music, sound, mp3, transport, player, loop |
23| Extracting audio data | `audio-analysis` | FFT, frequency, spectrum, amplitude, waveform, beat detection |
24| Visual-audio connection | `audio-reactive` | visualizer, reactive, respond to audio, sync, pulse, beat-driven |
25
26## Signal Matching
27
28### Primary Signals
29
30**audio-playback**:
31- "play audio", "load music", "sound effect"
32- "Tone.js", "Player", "transport"
33- "loop", "crossfade", "volume"
34- "schedule", "timing", "sync to beat"
35- "background music", "ambient sound"
36
37**audio-analysis**:
38- "FFT", "frequency", "spectrum"
39- "beat detection", "amplitude"
40- "waveform", "audio data"
41- "frequency bands", "bass", "treble"
42- "analyze", "extract", "measure"
43
44**audio-reactive**:
45- "visualizer", "audio reactive"
46- "respond to music", "sync visuals"
47- "pulse on beat", "frequency to color"
48- "music driven", "audio visualization"
49- "bloom on bass", "particles on beat"
50
51### Confidence Scoring
52
53- **High (3+ signals)** — Route directly to matched skill
54- **Medium (1-2 signals)** — Route with supporting skills
55- **Low (0 signals)** — Start with `audio-playback`
56
57## Common Combinations
58
59### Simple Audio Player (1 skill)
60```
61audio-playback → Load and play audio files
62```
63
64### Audio Visualizer (3 skills)
65```
66audio-playback → Load and control audio
67audio-analysis → Extract frequency/beat data
68audio-reactive → Map data to visual properties
69```
70
71### Background Music (1-2 skills)
72```
73audio-playback → Looping, crossfade, volume
74audio-analysis → Optional: beat sync features
75```
76
77### Beat-Synced Animation (2-3 skills)
78```
79audio-analysis → Beat detection
80audio-reactive → Trigger animations on beat
81audio-playback → Control playback
82```
83
84## Decision Table
85
86| Task | Primary Skill | Supporting Skills |
87|------|---------------|-------------------|
88| Play music file | playback | - |
89| Loop ambient sound | playback | - |
90| Create visualizer | reactive | playback + analysis |
91| Detect beats | analysis | playback |
92| Pulse on bass | reactive | analysis + playback |
93| Frequency spectrum display | analysis | playback |
94| Sound effects | playback | - |
95| Audio-reactive particles | reactive | analysis + playback |
96| Volume meter | analysis | playback |
97
98## Integration with Other Domains
99
100### With Post-Processing (postfx-*)
101```
102audio-analysis → Bass/high frequency data
103audio-reactive → Mapping strategy
104postfx-bloom → Audio-reactive glow intensity
105postfx-effects → Audio-reactive chromatic aberration
106```
107Audio drives post-processing parameters.
108
109### With Particles (particles-*)
110```
111audio-analysis → Beat detection, energy levels
112audio-reactive → Emission rate mapping
113particles-systems → Particle emitter configuration
114```
115Beats trigger particle bursts, energy controls speed.
116
117### With GSAP (gsap-*)
118```
119audio-analysis → Beat detection
120audio-reactive → Timeline control
121gsap-sequencing → Beat-synced timeline
122```
123Audio events trigger or scrub GSAP timelines.
124
125### With R3F (r3f-*)
126```
127audio-playback → Audio context in React
128audio-analysis → Data extraction
129audio-reactive → Update Three.js objects
130r3f-fundamentals → Scene/mesh setup
131```
132Audio data animates 3D scene properties.
133
134### With Shaders (shaders-*)
135```
136audio-analysis → Frequency uniforms
137audio-reactive → Uniform update strategy
138shaders-uniforms → Pass audio data to shaders
139```
140FFT data becomes shader uniforms for custom effects.
141
142## Workflow Patterns
143
144### Visualizer Development
145```
1461. audio-playback → Set up player and audio context
1472. audio-analysis → Configure analyzers and band extraction
1483. audio-reactive → Map frequencies to visual properties
149```
150
151### Beat-Reactive Experience
152```
1531. audio-playback → Load audio
1542. audio-analysis → Configure beat detection
1553. audio-reactive → Define beat response animations
156```
157
158### Ambient Soundscape
159```
1601. audio-playback → Looping players, crossfade
161 (Single skill usually sufficient)
162```
163
164## Temporal Collapse Stack
165
166For the New Year countdown audio experience:
167```
168audio-playback → Cosmic ambient loop, countdown ticks, celebration
169audio-analysis → Beat detection, bass/mid/high extraction
170audio-reactive → Map to bloom, particles, digit glow, vignette
171```
172
173Key features:
174- Background cosmic ambient audio (looped)
175- Tick sound per second (intensifies in final 10)
176- Beat detection for particle bursts
177- Bass → bloom intensity
178- High frequencies → chromatic aberration
179- Celebration music at zero
180
181## Quick Reference
182
183### Task → Skills
184
185| Task | Skills Needed |
186|------|---------------|
187| "Play background music" | playback |
188| "Loop ambient sound" | playback |
189| "Crossfade between tracks" | playback |
190| "Show frequency spectrum" | analysis + playback |
191| "Detect beats in music" | analysis + playback |
192| "Make visuals react to audio" | reactive + analysis + playback |
193| "Pulse element on beat" | reactive + analysis |
194| "Audio-reactive bloom" | reactive + analysis |
195| "Sound effects on events" | playback |
196
197### Audio Library Quick Reference
198
199| Library | Use Case |
200|---------|----------|
201| Tone.js | Full audio synthesis, analysis, effects |
202| Howler.js | Simple playback, sprites, mobile |
203| Web Audio API | Low-level, custom processing |
204
205### Common Frequency Bands
206
207| Band | Range | Visual Use |
208|------|-------|------------|
209| Sub-bass | 20-60 Hz | Deep pulses, rumble |
210| Bass | 60-250 Hz | Scale, intensity, beat |
211| Low-mid | 250-500 Hz | Background motion |
212| Mid | 500-2000 Hz | General energy |
213| High-mid | 2000-4000 Hz | Detail, sparkle |
214| High | 4000+ Hz | Shimmer, aberration |
215
216## Fallback Behavior
217
218- **No specific signals** → Start with `audio-playback`
219- **"Visualizer" mentioned** → Full stack: all three skills
220- **"React to music"** → `audio-reactive` + `audio-analysis`
221- **Just playing audio** → `audio-playback` only
222- **Performance concerns** → Focus on `audio-analysis` optimization
223
224## Performance Priority
225
226When performance is critical:
2271. `audio-analysis` — Use smaller FFT size (64-128)
2282. `audio-reactive` — Apply smoothing to reduce jitter
2293. `audio-playback` — Preload audio, reuse players