Is TailwindCSS 4 mandatory for using this skill?

Yes, the Shelby player components are built to work specifically with TailwindCSS 4 for default styles, layout management, and shadcn-style customization.

Can I create a completely custom UI for the video player?

Absolutely. While it includes a simple player, it also provides primitive components like VideoOutlet, PlayButton, and TimeSlider so you can build bespoke layouts.

Does this skill support both HLS and DASH formats?

Yes, the Shelby Media Player uses Shaka Player as its core engine, which provides robust support for both HLS (.m3u8) and DASH (.mpd) adaptive streaming formats.

How does it connect to Shelby decentralized storage?

The skill provides patterns for constructing API URLs that point to Shelby network blobs, allowing you to stream content directly from decentralized storage nodes.

Shelby Protocol Video Player

Name: Shelby Protocol Video Player
Author: zacharyr0th

byzacharyr0th

•

콘텐츠 관리

Integrates high-performance, decentralized video streaming into React applications using the Shelby Protocol and Shaka Player.

This skill empowers developers to implement professional-grade video streaming experiences by leveraging the Shelby Protocol's decentralized storage and Shaka Player's adaptive streaming capabilities. It provides comprehensive guidance on configuring HLS and DASH players, setting up TailwindCSS 4 styles, and building custom player UI components using a specialized React wrapper. Whether you are building a simple video landing page or a complex media gallery powered by decentralized storage, this skill handles the technical nuances of player initialization, event handling, and optimized media delivery.

주요 기능

01Automated setup for @shelby-protocol/player and TailwindCSS 4 styling requirements

02Advanced Shaka Player instance configuration for buffering and event management

03Rapid implementation of SimpleShakaVideoPlayer for HLS and DASH streaming

041 GitHub stars

05Seamless integration with Shelby decentralized storage blob URL patterns

06Custom player UI construction using primitive components and the usePlayer hook

사용 사례

01Implementing custom branded video player controls in a React-based media dashboard

02Building a decentralized video-on-demand platform using Shelby Protocol storage

03Optimizing web applications for adaptive bitrate streaming with HLS/DASH formats

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zacharyr0th/next-starter shelby

For use in Claude.ai and ChatGPT

Download Skill