sounds-on-the-web_skill

Overview

This skill audits TypeScript UI code for audio feedback best practices and accessibility. It flags issues like missing visual equivalents, absent user controls for sounds, improper implementation details, and inappropriate or mismatched sound usage. The tool reports findings in file:line format with rule IDs and produces a concise summary of counts and severities.

How this skill works

I scan the supplied files or file patterns and check each audio-related site against a curated rule set: accessibility, appropriateness, implementation, and weight-matching. For every violation I emit a file:line entry with a rule identifier and a short description. After listing findings I generate a summary table showing rule counts and severity to prioritize fixes.

When to use it

• Code review for UI changes that introduce or modify sounds
• Accessibility audits focused on non-visual feedback
• Pre-release checks for new audio assets or sound logic
• Design reviews to validate whether an interaction should have sound
• Audits of preference/settings and user controls for media

Best practices

• Always provide a visual equivalent for any auditory cue and never rely on sound as the sole feedback
• Expose a clear user preference to enable/disable sounds and honor reduced-motion/media preferences
• Preload and reuse audio objects, reset currentTime before play, and keep default volume subtle
• Avoid sounds on high-frequency interactions (typing, hover, scrolling); reserve sound for confirmations, errors, and important notifications
• Match sound weight and duration to the action’s importance and duration; choose gentle, informative tones over punitive or excessively loud cues

Example use cases

• Scan a components/ directory to find keystroke or hover sounds and flag high-frequency violations
• Audit sound player utilities for missing preload, volume control, or currentTime reset implementations
• Inspect settings and providers to ensure a user toggle for sound and respect for prefers-reduced-motion
• Review checkout or upload flows to confirm appropriate confirmation sounds with visual indicators
• Evaluate new sound assets to ensure duration and intensity match the corresponding action