ui-sound-design-skill
Health Pass
- License — License: MIT
- Description — Repository has a description
- Active repo — Last push 0 days ago
- Community trust — 28 GitHub stars
Code Fail
- execSync — Synchronous shell command execution in skills/ui-sound-design/tools/analyze-sound.mjs
Permissions Pass
- Permissions — No dangerous permissions requested
This skill translates plain-English descriptions of UI sounds into working Web Audio API and Tone.js code. It is designed to integrate seamlessly into developer workflows via compatible AI coding assistants like Claude Code and Cursor.
Security Assessment
The tool does not request dangerous permissions or access sensitive user data, and no hardcoded secrets were found. However, the automated scan flagged a synchronous shell command execution (`execSync`) within the `analyze-sound.mjs` file. While this might simply be used for harmless local file operations or interacting with the audio toolchain, any execution of synchronous system commands introduces a potential vector for code injection. Overall risk is rated as Medium.
Quality Assessment
The project is under the permissive and standard MIT license. It appears to be actively maintained, with repository pushes occurring as recently as today. The tool has garnered 28 GitHub stars, indicating a modest but existing level of community trust and usage among developers.
Verdict
Use with caution — review the shell execution implementation in `analyze-sound.mjs` to ensure it safely handles your inputs before integrating into your environment.
Claude Code skill that translates plain-English sound descriptions into working Web Audio API and Tone.js code
UI Sound Design Skill
▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁ ▁ ▃ ▅ ▇ ▅ ▃ ▁
██╗ ██╗██╗ ███████╗ ██████╗ ██╗ ██╗███╗ ██╗██████╗
██║ ██║██║ ██╔════╝██╔═══██╗██║ ██║████╗ ██║██╔══██╗
██║ ██║██║ ███████╗██║ ██║██║ ██║██╔██╗ ██║██║ ██║
██║ ██║██║ ╚════██║██║ ██║██║ ██║██║╚██╗██║██║ ██║
╚██████╔╝██║ ███████║╚██████╔╝╚██████╔╝██║ ╚████║██████╔╝
╚═════╝ ╚═╝ ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝
░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░ ░ ▒ ▓ █ ▓ ▒ ░
██████╗ ███████╗███████╗██╗ ██████╗ ███╗ ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗ ██║
██║ ██║█████╗ ███████╗██║██║ ███╗██╔██╗ ██║
██║ ██║██╔══╝ ╚════██║██║██║ ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝
▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇ ▇ ▅ ▃ ▁ ▃ ▅ ▇
An Agent Skill that translates plain-English sound descriptions into working Web Audio API and Tone.js code. Works with Claude Code, Cursor, VS Code/Copilot, Windsurf, Codex, Goose, and 30+ other AI coding tools. No audio engineering background needed.
What It Does
Describe what you want to hear, and your AI agent generates production-ready sound synthesis code.
The workflow is iterative: Describe the sound in plain language, Generate the code, Listen in-browser, Refine with feedback like "make it snappier" or "warmer". The skill handles the translation from subjective language to synthesis parameters.
Sound Categories
| Category | Duration | Character |
|---|---|---|
| Click | 30-100ms | Noise burst, bandpass filtered |
| Toggle | 80-200ms | Rising/falling pitch sweep |
| Hover | 30-100ms | Gentle, nearly subliminal |
| Success | 200-500ms | Ascending major third |
| Error | 150-400ms | Descending, buzzy |
| Warning | 150-350ms | Double pulse, mid-range |
| Notification | 200-800ms | Bell-like FM synthesis |
| Whoosh | 100-400ms | Filtered noise sweep |
| Pop | 30-100ms | Sine with pitch drop |
Try It
Open skills/ui-sound-design/assets/sound-preview.html in any browser. No install needed — click the buttons to hear all 10 default sounds.
Install
npx skills add dannyjpwilliams/ui-sound-design-skill
The CLI auto-detects your installed AI coding tools and installs the skill to all of them.
Compatibility
This skill follows the Agent Skills open standard and works with any compatible AI coding tool, including:
- Claude Code —
.claude/skills/ - Cursor —
.cursor/skills/ - VS Code / GitHub Copilot —
.github/skills/ - Windsurf —
.windsurf/skills/ - Codex CLI —
.codex/skills/ - Goose —
.goose/skills/ - Gemini CLI, Roo Code, Trae, and others
npx skills add handles the correct installation path for each tool automatically.
Usage
Ask your AI agent to design sounds using natural language:
"Make a click sound for a settings toggle — subtle, professional"
"I need a notification chime that sounds like a soft bell, not too attention-grabbing"
"Create a success sound for when a file uploads. Cheerful but not over the top."
"Build me a complete UI sound library with click, hover, success, and error sounds. Output as an ES module."
Your agent will generate an HTML preview you can open in your browser, then refine based on your feedback ("make it warmer", "shorter", "more playful").
Audio File References
Have a sound you want to match? Use it as a style reference:
node skills/ui-sound-design/tools/analyze-sound.mjs path/to/reference.wav
The analyzer extracts a detailed sound profile — duration, envelope, spectral content, harmonics, brightness — and maps it to synthesis parameters. Paste the output into your conversation, and your agent uses it as the starting point for synthesis. Then refine as usual.
Supports .wav natively. Other formats (.mp3, .ogg, .flac) require ffmpeg. Zero npm dependencies — just Node.js.
How It Works
The skill acts as a vocabulary bridge between subjective language and audio synthesis parameters:
| You Say | What Changes |
|---|---|
| "Brighter" | Raise frequency or filter cutoff |
| "Warmer" | Lower filter cutoff, switch to sine/triangle |
| "Snappier" | Shorter attack and decay |
| "Softer" | Lower volume, longer attack |
| "More metallic" | FM synthesis, inharmonic ratios |
| "More playful" | Higher pitch, add overshoot |
| "More professional" | Lower volume, sine wave, short duration |
| "Retro / 8-bit" | Square wave, quantized pitch |
The full vocabulary bridge and all recipes are embedded in the skill files, so any compatible agent has the synthesis knowledge to translate any description.
Skill Structure
skills/ui-sound-design/
├── SKILL.md # Skill definition — workflow, vocabulary bridge, rules
├── references/
│ ├── sound-recipes.md # 9 complete sound implementations + UISoundLibrary class
│ ├── web-audio-api.md # Web Audio API building blocks and patterns
│ ├── audio-file-references.md # Guide for interpreting audio file analysis profiles
│ └── tone-js.md # Tone.js patterns and vanilla conversion guide
├── assets/
│ └── sound-preview.html # Self-contained HTML demo with all 10 sounds
└── tools/
└── analyze-sound.mjs # CLI audio analyzer (zero dependencies)
License
Reviews (0)
Sign in to leave a review.
Leave a reviewNo results found