UI Sound Design

Zamienia 'niech będzie bardziej sprężyste' w działający kod dźwiękowy Web Audio API, z podglądem HTML na żywo.

Autor: dannyjpwilliams · dannyjpwilliams/ui-sound-design-skill

Testowano · Działa ★ 9.6/10

UI Sound Design — Zamienia 'niech będzie bardziej sprężyste' w działający kod dźwiękowy Web Audio API, z podglądem HTML na żywo.

Co robi ten skill

Generuje programowe efekty dźwiękowe interfejsu użytkownika (kliki, przełączniki, powiadomienia, dźwięki sukcesu/błędu) przy użyciu przepisów Web Audio API i Tone.js. Uruchamia się, gdy użytkownik prosi o dźwięki kliknięć, dzwonki powiadomień, sprzężenie zwrotne najechania kursorem lub bibliotekę dźwięków interfejsu użytkownika, i napędza pętlę iteracyjną opisz-generuj-słuchaj-dopracuj za pomocą mostu słownictwa, który mapuje słowa takie jak 'cieplejszy' lub 'sprężystszy' na parametry syntezy.

Raport z testu

Podążyłem za przepisem na dźwięk 'sukcesu' i otrzymałem singleton-AudioContext, implementację z wznoszącą tercją wielką z działającym podglądem HTML z eksportem WAV (zweryfikowano kod eksportu OfflineAudioContext); naiwna próba bazowa używała świeżego AudioContext na wywołanie i płaskiego pojedynczego tonu bez ścieżki eksportu.

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

Instalacja

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

Komendy i przykładowe prompty

  • /ui-sound-designZamienia 'niech będzie bardziej sprężyste' w działający kod dźwiękowy Web Audio API, z podglądem HTML na żywo.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

  • 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