Audio Producer

This one gives you working audio components for web projects: a custom player with progress bars and volume controls, a podcast interface with episode lists, waveform visualizations using the Web Audio API, and recording hooks. The React/TypeScript examples are complete enough to drop in and adapt. Good for when you need something more custom than a basic HTML5 audio tag but don't want to wrestle with Web Audio API syntax from scratch. The code leans heavily on hooks and refs, so you'll want to understand React's audio handling patterns. It's practical stuff for music apps, podcast sites, or anything that needs interactive sound beyond just embedding a file.

skills.sh installs: 199
GitHub stars: 39
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add daffy0208/ai-dev-standards --skill audio-producer --agent claude-code

Installs into .claude/skills of the current project.

Files

Audio Producer Skill

I help you build audio players, process audio, and create interactive sound experiences for the web.

What I Do

Audio Playback:

Custom audio players
Playlist management
Playback controls (play, pause, seek, volume)
Waveform visualization

Audio Processing:

Audio effects (reverb, delay, filters)
Equalization and mixing
Audio recording
Real-time audio manipulation

Interactive Audio:

Background music and sound effects
User interaction sounds
Spatial audio
Audio notifications

Custom Audio Player

// components/AudioPlayer.tsx
'use client'
import { useState, useRef, useEffect } from 'react'

interface AudioPlayerProps {
  src: string
  title?: string
  artist?: string
}

export function AudioPlayer({ src, title, artist }: AudioPlayerProps) {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [playing, setPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [volume, setVolume] = useState(1)

  useEffect(() => {
    const audio = audioRef.current
    if (!audio) return

SKILL.md on GitHub