Installation
npx skills add b-open-io/prompts --skill ui-audio-theme 55
Installs
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.
Requires ELEVENLABS_API_KEY set in the environment. See README.md for setup instructions.
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 |
|---|---|---|
corporate-trust |
Warm, professional | Banking, finance |
crypto-modern |
Digital, clean | Wallet apps, trading |
playful-delight |
Bright, friendly | Social, consumer |
minimal-focus |
Ultra-subtle | Productivity, tools |
retro-digital |
8-bit inspired | Games, nostalgic |
premium-luxury |
Rich, refined | High-end apps |
Step 3: Generate the Audio Theme
# 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
python scripts/generate_theme.py \
--regenerate "button-click-primary,notification-success" \
--vibe "crypto-modern" \
--output-dir "./audio-theme"Sound Categories
Buttons
| Constant | Description |
|---|---|
button-click-primary |
Main action buttons |
button-click-secondary |
Secondary/ghost buttons |
button-click-destructive |
Delete/cancel actions |
Navigation
| Constant | Description |
|---|---|
nav-tab-switch |
Tab navigation |
nav-back |
Back button/gesture |
nav-forward |
Forward navigation |
nav-menu-open |
Menu drawer open |
nav-menu-close |
Menu dismiss |
Feedback
| Constant | Description |
|---|---|
notification-success |
Success confirmation |
notification-error |
Error alert |
notification-warning |
Warning indicator |
notification-info |
Information notice |
notification-badge |
Badge/counter update |
States
| Constant | Description |
|---|---|
toggle-on |
Switch enabled |
toggle-off |
Switch disabled |
checkbox-check |
Checkbox selected |
checkbox-uncheck |
Checkbox deselected |
loading-start |
Loading initiated |
loading-complete |
Loading finished |
Modals
| Constant | Description |
|---|---|
modal-open |
Modal appearance |
modal-close |
Modal dismissal |
tooltip-show |
Tooltip reveal |
dropdown-open |
Dropdown expand |
dropdown-close |
Dropdown collapse |
Transactions (Wallet-specific)
| Constant | Description |
|---|---|
tx-sent |
Transaction sent |
tx-received |
Payment received |
tx-pending |
Transaction waiting |
tx-confirmed |
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/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
scripts/generate_theme.py— CLI tool for generating themesreferences/sound-design-guide.md— Detailed sound design best practicesassets/vibe-presets.json— Predefined vibe configurationsassets/theme-template.json— Example output manifestREADME.md— Prerequisites, design philosophy, integration examples (React hook, Howler.js), accessibility guidance
Installs
Security Audit
View Source
b-open-io/prompts
More from this source
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
How to use this skill
Install ui-audio-theme by running npx skills add b-open-io/prompts --skill ui-audio-theme in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.
No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.
The skill enhances your agent's understanding of ui-audio-theme, helping it follow established patterns, avoid common mistakes, and produce production-ready output.
What you get
Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.
Compatibility
This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
Get the App:
