ui-sound-design — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited ui-sound-design (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁
██╗ ██╗██╗ ███████╗ ██████╗ ██╗ ██╗███╗ ██╗██████╗
██║ ██║██║ ██╔════╝██╔═══██╗██║ ██║████╗ ██║██╔══██╗
██║ ██║██║ ███████╗██║ ██║██║ ██║██╔██╗ ██║██║ ██║
██║ ██║██║ ╚════██║██║ ██║██║ ██║██║╚██╗██║██║ ██║
╚██████╔╝██║ ███████║╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝
╚═════╝ ╚═╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝
░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░
██████╗ ███████╗███████╗██╗ ██████╗ ███╗ ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗ ██║
██║ ██║█████╗ ███████╗██║██║ ███╗██╔██╗ ██║
██║ ██║██╔══╝ ╚════██║██║██║ ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝
▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇Describe what your UI should sound like. Preview it, tweak it, and download it from the browser.
Translate plain-English sound descriptions into working Web Audio API code. No audio engineering background needed — describe what you want to hear, and this skill provides the synthesis knowledge to make it real.
Every sound follows this loop: Describe → Generate → Listen → Refine (with optional Review for auditing existing code)
The user describes the sound in plain language. Ask clarifying questions using this framework:
Four questions before generating any sound:
node skills/ui-sound-design/tools/analyze-sound.mjs path/to/reference.wavThen paste the output back. When a sound profile is provided:
references/audio-file-references.md for interpretation guidancesynthesis_suggestion block for initial parametersrecipe_starting_pointreferences/sound-recipes.mdVOCABULARY MATCH sectionIf the user gives a vague request like "make a click sound", use sensible defaults from the recipes and generate immediately — don't over-ask.
references/sound-recipes.mdreferences/web-audio-api.mdassets/sound-preview.html), or ES module / React hook / class if requestedProvide the HTML preview file so the user can open it in a browser and hear the sound immediately. Each sound includes a download button that exports a .wav file for use in production code or handoff to developers. Include labeled buttons for each sound variation. The preview must:
When the user gives feedback, translate it using the vocabulary bridge and adjust parameters. Common refinement patterns:
Enter review mode when the user says "review", "audit", or "check my sound code", or pastes existing Web Audio code for evaluation.
Steps:
references/audio-rules.mdaudio-rules.md — one line per violation with file:line — [rule-id] descriptionWhen to stay in generate mode: If the user's request is ambiguous (e.g., "here's my click sound" without asking for review), default to the generative workflow. Only enter review mode when the intent to audit is clear.
This is the core translation layer. When the user uses subjective language, map it to synthesis parameters:
| User Says | Parameter Change | Example |
|---|---|---|
| "Brighter" | Raise frequency or filter cutoff | Filter cutoff 1500 → 3000 Hz |
| "Warmer" | Lower filter cutoff, use sine/triangle wave | Switch sawtooth → sine, cutoff 3000 → 1200 |
| "Darker" | Lower frequency, reduce high harmonics | Add lowpass filter at 800 Hz |
| "Snappier" | Shorter attack and decay | Decay 0.15 → 0.05s |
| "Softer" | Lower volume, longer attack, gentle envelope | Volume 0.3 → 0.15, attack 0 → 0.01s |
| "Louder" / "More prominent" | Raise volume (max 0.8) | Volume 0.2 → 0.4 |
| "Fuller" / "Richer" | Layer oscillators, add detune | Add second osc detuned +7 cents |
| "Thinner" | Remove layers, use sine wave, raise highpass | Single sine, highpass at 500 Hz |
| "More metallic" | FM synthesis, inharmonic ratios | Mod ratio 1.4, increase mod depth |
| "More organic" / "Natural" | Use noise components, subtle randomness | Mix in filtered noise burst |
| "Shorter" / "Crisper" | Reduce total duration | Duration 0.15 → 0.06s |
| "Longer" / "More sustained" | Increase duration and sustain | Duration 0.1 → 0.3s, add sustain phase |
| "More playful" | Higher pitch, bounce/overshoot | Frequency +200 Hz, add pitch overshoot |
| "More professional" | Subtle, clean, minimal | Lower volume, sine wave, short duration |
| "Retro" / "8-bit" | Square wave, quantized pitch | Switch to square, use note frequencies |
| "Bubbly" | Rapid pitch drop, sine wave | startFreq 2000, quick exponential drop |
| Category | Duration | Recipe | Trigger | Key Character |
|---|---|---|---|---|
| Click | 10–80ms | references/sound-recipes.md#click | Button press, tap | Noise burst, bandpass filtered |
| Toggle | 80–200ms | references/sound-recipes.md#toggle | Switch on/off | Rising/falling pitch sweep |
| Hover | 30–80ms | references/sound-recipes.md#hover | Mouse enter | Gentle, nearly subliminal |
| Success | 200–500ms | references/sound-recipes.md#success | Task complete, save | Ascending major third |
| Error | 150–400ms | references/sound-recipes.md#error | Validation fail, rejected | Descending, buzzy |
| Warning | 150–350ms | references/sound-recipes.md#warning | Caution state | Double pulse, mid-range |
| Notification | 200–800ms | references/sound-recipes.md#notification | New message, alert | Bell-like FM synthesis |
| Whoosh | 100–400ms | references/sound-recipes.md#whoosh | Page transition, slide | Filtered noise sweep |
| Pop | 30–80ms | references/sound-recipes.md#pop | Add item, bubble, appear | Sine with pitch drop |
| Custom | varies | references/web-audio-api.md | Anything else | Compose from building blocks |
Browsers block audio until a user interaction (click, tap, keydown). Always initialize or resume the AudioContext inside an event handler. The singleton pattern in references/web-audio-api.md handles this.
exponentialRampToValueAtTime(0, ...) throws an error. Always ramp to 0.001 — it's inaudible but mathematically valid. This applies to every sound. No exceptions.
stop() — no manual cleanup neededdisconnect() when done0.3 (gain value)0.8 — never exceed this0.03–0.08 (barely perceptible)Capture const now = ctx.currentTime once at the start of each sound function. Derive all scheduling times from now. Never read currentTime multiple times.
exponentialRampToValueAtTime sounds natural for both volume and frequency. linearRampToValueAtTime sounds mechanical. Only use linear for sub-50ms transitions.
Adapt assets/sound-preview.html. Self-contained, no dependencies, opens in any browser. Best for the iterative listen-refine loop. Includes WAV download — click the download button on any sound to get a .wav file. Sound functions must use (ctx, dest) parameters with fallback defaults for download support, and each sound needs a matching entry in the durations map.
// ui-sounds.js
export function playClick(options) { /* ... */ }
export function playSuccess(options) { /* ... */ }// useUISound.js
export function useUISound() {
const ctxRef = useRef(null);
const getCtx = useCallback(() => { /* singleton */ }, []);
return { playClick, playSuccess, /* ... */ };
}Use the UISoundLibrary class from references/sound-recipes.md. Bundles all sounds with enable/disable and master volume control.
UISoundLibrary class. Each recipe includes parameters, code, tuning guide, and variations. Start here for most requests.analyze-sound.mjs CLI tool. Maps audio analysis metrics to synthesis parameters and recipe selection. Load when the user provides a sound profile from an audio file reference.node tools/analyze-sound.mjs <file>. Zero dependencies — works with any Node.js installation. Supports .wav natively; other formats require ffmpeg. Outputs duration, envelope, spectral content, tonality, and a synthesis suggestion that maps directly to recipe parameters.~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.