Designing audio interfaces with audio/ui

@audio-ui/react primitives are headless: they bring behavior, input and ARIA, and no look. This skill gives them one. Choose a direction first and say it in a sentence, then style every part from it; mixing three looks is what makes a panel read as a template.

When to Apply

• A synth, mixer, plugin, sampler or drum machine panel that should look like hardware, or like a named style
• Retro, skeuomorphic, minimalist or modern directions, with or without shadcn/ui or Tailwind
• Styling @audio-ui/react primitives from scratch with a ready skin
• A look the skins do not cover, or a reference the user names
• Reviewing a panel that looks flat, generic or uneven

Rule Categories by Priority

Quick Reference