Does this work with Next.js App Router?

Yes, the skill is specifically designed for Next.js projects using the App Router and the src/ directory structure.

Can I use this for video calls?

While built on LiveKit's video infrastructure, this specific skill is architected and styled exclusively for audio-only experiences to mimic social audio platforms.

Is the 'Raise Hand' queue synchronized across all users?

Yes, the queue uses LiveKit data packets to ensure all participants see the same order of users waiting to speak in real-time.

What dependencies does this skill require?

This skill requires the 'video-room' skill for base infrastructure and the 'add-shadcn' skill for UI components like Buttons and Avatars.

How does the speaking indicator work?

It uses LiveKit's active speaker detection event to trigger a custom CSS animation component that provides visual feedback when a participant is talking.

Interactive Audio Spaces

Name: Interactive Audio Spaces
Author: mattwoodco

bymattwoodco

•

Herramientas de Colaboración

Implements a Clubhouse-style audio-only chat environment with real-time speaking indicators and participant management.

Interactive Audio Spaces is a specialized skill that builds a production-ready social audio experience using LiveKit. It generates a sophisticated UI featuring a circular avatar grid inspired by platforms like Twitter Spaces, including dynamic pulsing rings for active speakers, a functional 'raise hand' queue for moderated interactions, and comprehensive controls for muting and deafening. This skill is ideal for developers needing to integrate high-quality, low-latency voice rooms into Next.js applications with minimal manual boilerplate.

Características Principales

01Custom React hooks for room connection and participant tracking

02Real-time circular avatar grid with CSS-based pulsing speaking indicators

033 GitHub stars

04Complete audio state management (Mute/Deafen) for local and remote participants

05Synchronized 'Raise Hand' queue system using LiveKit data channels

06Seamless integration with shadcn/ui for professional-grade interface design

Casos de Uso

01Implementing live Q&A sessions or town halls for webinars and events

02Creating audio-only collaboration 'war rooms' for remote engineering teams

03Building community-driven 'Spaces' or 'Stages' within social networking apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills audio-room

For use in Claude.ai and ChatGPT

Download Skill