UI Sound Design

Transforme 'rendez-le plus percutant' en code audio Web Audio API fonctionnel, avec aperçu HTML en direct.

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

Testé · Fonctionne ★ 9.6/10

UI Sound Design — Transforme 'rendez-le plus percutant' en code audio Web Audio API fonctionnel, avec aperçu HTML en direct.

Ce que fait

Génère des effets sonores programmatiques pour l'interface utilisateur (clics, basculements, notifications, sons de succès/erreur) en utilisant des recettes Web Audio API et Tone.js. Se déclenche lorsqu'un utilisateur demande des sons de clic, des carillons de notification, un retour haptique au survol, ou une bibliothèque de sons d'interface utilisateur, et pilote une boucle itérative décrire-générer-écouter-affiner via un pont lexical qui mappe des mots comme 'plus chaud' ou 'plus percutant' à des paramètres de synthèse.

Rapport de test

A suivi la recette pour un son de 'succès' et a obtenu un AudioContext singleton, une implémentation de tierce majeure ascendante avec un aperçu HTML exportable en WAV (code d'exportation OfflineAudioContext vérifié) ; une tentative naïve de base utilisait un nouvel AudioContext à chaque appel et un simple ton plat sans chemin d'exportation.

Testé le: 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

Commandes et exemples de prompts

  • /ui-sound-designTransforme 'rendez-le plus percutant' en code audio Web Audio API fonctionnel, avec aperçu HTML en direct.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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