Do I need to install extra npm packages for this skill?

No, this skill leverages the livekit-client and @livekit/components-react packages that are already installed via the prerequisite video-room and video-ui skills.

How does the auto-switching layout work?

The PresenterLayout component monitors active tracks in the room; it renders a standard participant grid when no one is sharing and automatically swaps to a large presentation view when a screen share begins.

Can I use the logic without the provided UI components?

Yes, the skill includes a useScreenShare hook that provides all the underlying state and methods (isScreenSharing, toggleScreenShare, etc.) for building your own custom UI.

Does the screen share view support a camera overlay?

Yes, the ScreenShareView component includes an optional Picture-in-Picture (PiP) overlay that automatically finds and displays the presenter's camera feed over their shared content.

LiveKit Screen Sharing

Name: LiveKit Screen Sharing
Author: mattwoodco

bymattwoodco

•

Herramientas de Colaboración

Integrates professional screen sharing capabilities into LiveKit video applications with auto-switching presenter layouts and PiP overlays.

This skill provides a complete set of React components and hooks for adding robust screen sharing functionality to LiveKit-powered video rooms. It includes a smart PresenterLayout that automatically detects active shares to swap between grid and presentation modes, a ScreenShareView featuring a picture-in-picture camera overlay for the presenter, and a customizable toggle button. It is ideal for developers building collaborative tools, educational platforms, or enterprise meeting software who need a polished, production-ready sharing experience with minimal configuration.

Características Principales

01Ready-to-use ScreenShareButton with built-in state and icon management

02Picture-in-Picture (PiP) camera overlay to keep presenters visible during shares

03Support for tracking and rendering multiple concurrent screen shares

04Auto-switching PresenterLayout for seamless transitions between grid and share modes

053 GitHub stars

06Customizable useScreenShare hook for programmatic control over sharing states

Casos de Uso

01Enhancing standard video conferencing apps with professional presenter modes

02Building remote collaboration tools for presentations and code walkthroughs

03Creating virtual classrooms where teachers share screens while maintaining a PiP presence

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills screen-share

For use in Claude.ai and ChatGPT

Download Skill