Creates accessible video/audio players in React with HLS/DASH support.
npx skills add https://github.com/sncollective/snc-platform --skill vidstack-v1
Please help me install this Agent Skill. Skill: vidstack-v1 Source: https://github.com/sncollective/snc-platform/tree/main/.claude/skills/vidstack-v1 Command: npx skills add https://github.com/sncollective/snc-platform --skill vidstack-v1
Vidstack provides a React-based media player toolkit to effortlessly build accessible video and audio experiences with automated streaming support.
It covers a wide range of playback scenarios including on-demand and live streams, headless or layout-based UIs, SSR-safe dynamic imports, and a comprehensive set of hooks, components, and layouts for rapid integration in applications such as live streaming dashboards, media galleries, and training portals. It also offers pre-built layouts (DefaultVideoLayout, DefaultAudioLayout, PlyrLayout), headless primitives, and robust guidance for building accessible, responsive media players with HLS/DASH support and captions.
Dynamically import Vidstack on the client and render a minimal MediaPlayer with a DefaultVideoLayout to start playing.
High-intent search queries and answers about installing and using this skill.
You can build an accessible React media player using a toolkit that provides headless primitives, pre-built layouts, and automated streaming support for HLS and DASH playback. It offers SSR-safe dynamic client-side imports and hooks to assemble custom UIs.
Yes, a headless media player suits live streaming dashboards in React by providing automated streaming support, flexible layouts, and a rich suite of hooks. It handles both live and on-demand content with SSR-safe usage.
The best way to add captions and PiP is using a React media player toolkit that provides pre-built layouts and headless primitives. It includes components for captions and picture-in-picture across live and on-demand video content.
Yes, this React media player toolkit supports SSR-safe usage through dynamic client-side imports. You dynamically import the MediaPlayer and MediaProvider on the client to render video and audio experiences without server-side rendering issues.
You start building a custom video player UI by dynamically importing the MediaPlayer and MediaProvider components on the client side. You then apply a DefaultVideoLayout and use the rich suite of hooks to assemble tailored media experiences.
SumitRajpalAnalyze Next.js bundle output to identify heavy dependencies and duplicate packages.
shelbyBuild and transcode media with Shelby Protocol for HLS, DASH, and Widevine DRM.
AngelP17Standardize UI design with Tailwind-based design tokens and component patterns.
gountharIntegrate Shelby Protocol decentralized storage into applications with architecture and optimization guidance.
