ui-audio-theme

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.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "ui-audio-theme" with this command: npx skills add b-open-io/prompts/b-open-io-prompts-ui-audio-theme

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:

PresetToneBest For
corporate-trustWarm, professionalBanking, finance
crypto-modernDigital, cleanWallet apps, trading
playful-delightBright, friendlySocial, consumer
minimal-focusUltra-subtleProductivity, tools
retro-digital8-bit inspiredGames, nostalgic
premium-luxuryRich, refinedHigh-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-sounds

Step 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

ConstantDescription
button-click-primaryMain action buttons
button-click-secondarySecondary/ghost buttons
button-click-destructiveDelete/cancel actions

Navigation

ConstantDescription
nav-tab-switchTab navigation
nav-backBack button/gesture
nav-forwardForward navigation
nav-menu-openMenu drawer open
nav-menu-closeMenu dismiss

Feedback

ConstantDescription
notification-successSuccess confirmation
notification-errorError alert
notification-warningWarning indicator
notification-infoInformation notice
notification-badgeBadge/counter update

States

ConstantDescription
toggle-onSwitch enabled
toggle-offSwitch disabled
checkbox-checkCheckbox selected
checkbox-uncheckCheckbox deselected
loading-startLoading initiated
loading-completeLoading finished

Modals

ConstantDescription
modal-openModal appearance
modal-closeModal dismissal
tooltip-showTooltip reveal
dropdown-openDropdown expand
dropdown-closeDropdown collapse

Transactions (Wallet-specific)

ConstantDescription
tx-sentTransaction sent
tx-receivedPayment received
tx-pendingTransaction waiting
tx-confirmedConfirmation 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 names

Resources

  • scripts/generate_theme.py — CLI tool for generating themes
  • references/sound-design-guide.md — Detailed sound design best practices
  • assets/vibe-presets.json — Predefined vibe configurations
  • assets/theme-template.json — Example output manifest
  • README.md — Prerequisites, design philosophy, integration examples (React hook, Howler.js), accessibility guidance

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Research

x-research

No summary provided by upstream source.

Repository SourceNeeds Review
General

geo-optimizer

No summary provided by upstream source.

Repository SourceNeeds Review
General

npm-publish

No summary provided by upstream source.

Repository SourceNeeds Review
General

statusline-setup

No summary provided by upstream source.

Repository SourceNeeds Review