UI Sound Design

Convierte 'hazlo más ágil' en código de sonido Web Audio API funcional, con vista previa HTML en vivo.

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

Probado · Funciona ★ 9.6/10

UI Sound Design — Convierte 'hazlo más ágil' en código de sonido Web Audio API funcional, con vista previa HTML en vivo.

Qué hace

Genera efectos de sonido programáticos para UI (clics, toggles, notificaciones, tonos de éxito/error) usando Web Audio API y recetas de Tone.js. Se activa cuando un usuario pide sonidos de clic, campanillas de notificación, feedback de hover o una biblioteca de sonidos de UI, y dirige un bucle iterativo de describir-generar-escuchar-refinar a través de un puente de vocabulario que mapea palabras como 'más cálido' o 'más ágil' a parámetros de síntesis.

Informe de la prueba

Seguí la receta para un sonido de 'éxito' y obtuve un singleton-AudioContext, implementación de tercera mayor ascendente con una vista previa HTML de exportación WAV funcional (verifiqué el código de exportación OfflineAudioContext); un intento ingenuo de línea base usó un AudioContext nuevo por llamada y un tono plano único sin ruta de exportación.

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

Instalación

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

Comandos y prompts de ejemplo

  • /ui-sound-designConvierte 'hazlo más ágil' en código de sonido Web Audio API funcional, con vista previa HTML en vivo.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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