ui-audio-theme
Original:🇺🇸 English
Translated
1 scriptsChecked / no sensitive code detected
Generate cohesive UI audio themes with subtle, minimal sound effects for applications. This skill should be used when users want to create a set of coordinated interface sounds for wallet apps, dashboards, or web applications - generating sounds mapped to UI interaction constants like button clicks, notifications, and navigation transitions using ElevenLabs API.
16installs
Sourceb-open-io/prompts
Added on
NPX Install
npx skill4agent add b-open-io/prompts ui-audio-themeTags
Translated version includes tags in frontmatterSKILL.md Content
View Translation Comparison →UI Audio Theme Generator
Generate cohesive sets of subtle, minimal UI sound effects using ElevenLabs text-to-sound-effects API. Create "audio themes" - coordinated sets of sounds that share a common aesthetic and map to standard UI interaction constants.
Prerequisites
bash
# Verify ElevenLabs API key is configured
echo $ELEVENLABS_API_KEY
# If not set, get key from https://elevenlabs.io (Profile -> API Keys)
# Add to shell profile: export ELEVENLABS_API_KEY="your-key"Workflow
Step 1: Discover the UI Vibe
Before generating sounds, understand the application's aesthetic:
Application Context:
- What type of app? (wallet, dashboard, social, productivity)
- Primary user emotion? (trust, delight, focus, calm)
- Professional or playful interface?
Audio Direction:
- Preferred tone? (warm/organic, clean/digital, retro/nostalgic, futuristic)
- Reference sounds? (Apple-like clicks, game bleeps, banking chimes)
Step 2: Select a Vibe Preset
Available presets in :
assets/vibe-presets.json| Preset | Tone | Best For |
|---|---|---|
| Warm, professional | Banking, finance |
| Digital, clean | Wallet apps, trading |
| Bright, friendly | Social, consumer |
| Ultra-subtle | Productivity, tools |
| 8-bit inspired | Games, nostalgic |
| Rich, refined | High-end apps |
Step 3: Generate the Audio Theme
bash
# Using preset vibe
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--output-dir "./audio-theme"
# Using custom vibe description
python scripts/generate_theme.py \
--vibe-custom "warm organic subtle wooden interface sounds" \
--output-dir "./audio-theme"
# Generate specific categories only
python scripts/generate_theme.py \
--vibe "crypto-modern" \
--categories buttons feedback transactions \
--output-dir "./audio-theme"
# List available presets
python scripts/generate_theme.py --list-vibes
# List all sound names
python scripts/generate_theme.py --list-soundsStep 4: Regenerate Individual Sounds
bash
python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"Sound Categories
Buttons
| Constant | Description |
|---|---|
| Main action buttons |
| Secondary/ghost buttons |
| Delete/cancel actions |
Navigation
| Constant | Description |
|---|---|
| Tab navigation |
| Back button/gesture |
| Forward navigation |
| Menu drawer open |
| Menu dismiss |
Feedback
| Constant | Description |
|---|---|
| Success confirmation |
| Error alert |
| Warning indicator |
| Information notice |
| Badge/counter update |
States
| Constant | Description |
|---|---|
| Switch enabled |
| Switch disabled |
| Checkbox selected |
| Checkbox deselected |
| Loading initiated |
| Loading finished |
Modals
| Constant | Description |
|---|---|
| Modal appearance |
| Modal dismissal |
| Tooltip reveal |
| Dropdown expand |
| Dropdown collapse |
Transactions (Wallet-specific)
| Constant | Description |
|---|---|
| Transaction sent |
| Payment received |
| Transaction waiting |
| Confirmation success |
Output Structure
audio-theme/
├── theme.json # Theme manifest
├── constants.ts # TypeScript constants
├── buttons/
│ ├── button-click-primary.mp3
│ ├── button-click-secondary.mp3
│ └── button-click-destructive.mp3
├── navigation/
├── feedback/
├── states/
├── modals/
└── transactions/Integration
TypeScript Usage
The generated exports ready-to-use constants:
constants.tstypescript
import { UI_SOUNDS } from './audio-theme/constants';
const audio = new Audio(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
audio.volume = 0.3;
audio.play();React Hook
typescript
import { useCallback, useEffect, useRef } from 'react';
export function useUISound(soundUrl: string, volume = 0.3) {
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
audioRef.current = new Audio(soundUrl);
audioRef.current.volume = volume;
audioRef.current.preload = 'auto';
return () => { audioRef.current = null; };
}, [soundUrl, volume]);
const play = useCallback(() => {
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current.play().catch(() => {});
}
}, []);
return play;
}
// Usage
function SendButton() {
const playClick = useUISound(UI_SOUNDS.BUTTON_CLICK_PRIMARY);
return <button onClick={() => { playClick(); sendTransaction(); }}>Send</button>;
}Howler.js
typescript
import { Howl } from 'howler';
const sounds = {
click: new Howl({ src: [UI_SOUNDS.BUTTON_CLICK_PRIMARY], volume: 0.3 }),
success: new Howl({ src: [UI_SOUNDS.NOTIFICATION_SUCCESS], volume: 0.4 }),
};
// Play on interaction
sounds.click.play();Best Practices
Volume Recommendations
UI sounds should be mixed at 20-40% to remain unobtrusive.
Accessibility
- Never rely solely on audio for critical information
- Provide visual alternatives for all audio feedback
- Allow users to disable sounds in settings
Subtlety Principle
The more frequently a sound occurs, the subtler it should be. Button clicks should be nearly imperceptible; transaction confirmations can be more noticeable.
Script Options
--vibe NAME Preset vibe name
--vibe-custom DESC Custom vibe description
--output-dir PATH Output directory (default: ./audio-theme)
--format FORMAT mp3 or wav (default: mp3)
--categories CATS Specific categories to generate
--regenerate SOUNDS Comma-separated sounds to regenerate
--prompt-influence N 0-1, higher = stricter prompt adherence (default: 0.5)
--list-vibes Show available presets
--list-sounds Show all sound namesResources
- - CLI tool for generating themes
scripts/generate_theme.py - - Detailed sound design best practices
references/sound-design-guide.md - - Predefined vibe configurations
assets/vibe-presets.json - - Example output manifest
assets/theme-template.json
Content-Specialist Integration
For custom sound generation beyond standard categories, use the content-specialist agent which has full ElevenLabs API integration for sound effects, music, and voice generation.