UI Sound Design

Gör 'gör det rappare' till fungerande Web Audio API-ljudkod, med en live HTML-förhandsvisning.

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

Testad · Fungerar ★ 9.6/10

UI Sound Design — Gör 'gör det rappare' till fungerande Web Audio API-ljudkod, med en live HTML-förhandsvisning.

Vad den gör

Genererar programmatiska UI-ljudeffekter (klick, växlingar, aviseringar, lyckade/feltoner) med Web Audio API och Tone.js-recept. Utlöses när en användare ber om klickljud, aviseringsklockor, hover-feedback eller ett UI-ljudbibliotek, och driver en iterativ beskriv-generera-lyssna-förfina-loop via en vokabulärbro som mappar ord som 'varmare' eller 'rappare' till syntesparametrar.

Testrapport

Följde receptet för ett 'lyckat'-ljud och fick en singleton-AudioContext, en stigande-major-tredjedels-implementation med en fungerande WAV-export HTML-förhandsvisning (verifierad OfflineAudioContext exportkod); ett naivt baslinjeförsök använde en ny AudioContext per anrop och en platt enkel ton utan exportväg.

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

Installation

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

Kommandon och exempelprompter

/ui-sound-designGör 'gör det rappare' till fungerande Web Audio API-ljudkod, med en live HTML-förhandsvisning.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →