UI Sound Design

Verandert 'maak het vlotter' in werkende Web Audio API-geluidcode, met een live HTML-preview.

Door dannyjpwilliams · dannyjpwilliams/ui-sound-design-skill

Getest · Werkt ★ 9.6/10

UI Sound Design — Verandert 'maak het vlotter' in werkende Web Audio API-geluidcode, met een live HTML-preview.

Wat het doet

Genereert programmatische UI-geluidseffecten (klikken, schakelaars, meldingen, succes/fout-tonen) met Web Audio API en Tone.js-recepten. Wordt geactiveerd wanneer een gebruiker vraagt om klikgeluiden, meldingsbellen, hover-feedback of een UI-geluidsbibliotheek, en stuurt een iteratieve beschrijven-genereren-luisteren-verfijnen-lus aan via een vocabulairebrug die woorden als 'warmer' of 'vlotter' koppelt aan syntheseparameters.

Testrapport

Volgde het recept voor een 'succes'-geluid en kreeg een singleton-AudioContext, oplopende-grote-terts-implementatie met een werkende WAV-export HTML-preview (geverifieerde OfflineAudioContext exportcode); een naïeve basispoging gebruikte een nieuwe AudioContext per aanroep en een platte enkele toon zonder exportpad.

Getest op: 2026-07-15 · Claude Code 2.x (agent harness)

Installatie

git clone https://github.com/dannyjpwilliams/ui-sound-design-skill
cd ui-sound-design-skill
mkdir -p ~/.claude/skills
cp -r skills/ui-sound-design ~/.claude/skills/ui-sound-design

Commando's en voorbeeldprompts

/ui-sound-designVerandert 'maak het vlotter' in werkende Web Audio API-geluidcode, met een live HTML-preview.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Make a satisfying click sound for this button using Web Audio API
I need a notification chime for new messages in my app
Build a UI sound library with hover, toggle, and success tones

Volledig rapport (Engels) →