Live Stream Shopping Toolkit

ReactE-CommerceVideoUXWebSocketUpdated 2026-08-12

When to use: Building live-stream shopping features for e-commerce platforms, social commerce apps, or video-shopping experiences.

Install
npx skills add live-stream-shopping-toolkit
Git Clone
git clone https://github.com/skillhub-community/live-stream-shopping-toolkit.git

Description

A complete live-stream shopping UI toolkit: a video-player shell with overlay components — a product-pinning card that the host can trigger to display the current product (image, name, price, discount badge) as a floating card over the video; a flash-sale countdown timer with ring animation and 'Snap Up Now' CTA button; and a real-time bullet-chat (弹幕) overlay showing user comments, purchase announcements, and question submissions scrolling across the screen.

Includes a bottom cart-drawer that lets viewers add products without leaving the stream, a gift/coin-sending panel with animated effects, and a pre-stream setup page where hosts configure the product playlist and pin schedule. All real-time features are WebSocket-driven with fallback polling. Mobile-first design optimized for portrait video (9:16 aspect ratio).

AI Hub

Need a model endpoint?

AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.

Open AI Hub

Metadata

Author@ecom_liu
LicenseMIT
Version1.0.0
Dependencies0