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.
- Installs
- 67
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill audio-router- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads audio-router automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
FAQ
What does the audio-router skill do?
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.
How do I install audio-router?
Run npx skills add https://github.com/bbeierle12/skill-mcp-claude --skill audio-router in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/audio-router/ (personal) or .claude/skills/audio-router/ (project).
Which AI agents can use audio-router?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is audio-router safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains audio-router?
It is published by bbeierle12 in bbeierle12/skill-mcp-claude. It has 67 recorded installs.
More from bbeierle12/skill-mcp-claude
gsap-react
bbeierle12/skill-mcp-claude
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
gsap-scrolltrigger
bbeierle12/skill-mcp-claude
Scroll-based animations using GSAP ScrollTrigger plugin including pinning, scrubbing, snap points, and parallax effects. Use when creating scroll-driven animations, sticky sections, progress indicators, or parallax scrolling experiences.
gsap-fundamentals
bbeierle12/skill-mcp-claude
Core GSAP animation concepts including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations, transitions, or learning GSAP foundations. Essential starting point for any GSAP-based animation work.
shader-effects
bbeierle12/skill-mcp-claude
Visual shader effects—glow/bloom, chromatic aberration, distortion, vignette, film grain, scanlines, glitch, dissolve, outline, and fresnel. Use when adding visual polish, post-processing effects, or stylized rendering to shaders.
d3js-visualization
bbeierle12/skill-mcp-claude
Create D3.js charts and interactive data visualizations. Use when building bar charts, line charts, scatter plots, pie charts, force-directed graphs, geographic maps, or any custom data visualization.
particles-gpu
bbeierle12/skill-mcp-claude
GPU-based particle systems using instanced rendering, buffer attributes, Points geometry, and custom shaders. Use when rendering thousands to millions of particles efficiently, creating particle effects like snow, rain, stars, or abstract visualizations.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image