直播带货购物套件
React电商Video用户体验WebSocket更新于 2026-08-12
使用场景： 为电商平台、社交电商应用或视频购物体验构建直播带货功能——国内电商的主流渠道。
安装
npx skills add live-stream-shopping-toolkit克隆
git clone https://github.com/skillhub-community/live-stream-shopping-toolkit.git描述
完整的直播带货 UI 套件：视频播放器外壳叠加浮层组件——主播可触发商品置顶卡片，将当前商品（图片、名称、价格、折扣标签）以浮动卡片形式展示在视频上方；闪购倒计时器（环形动画 +「立即抢购」CTA 按钮）；实时弹幕浮层——用户评论、购买公告（「XXX 刚刚购买了！」）和提问在屏幕上滚动展示。
包含底部购物车抽屉——观众无需离开直播间即可添加商品；礼物/金币打赏面板（带动画特效）；以及开播前的准备页面——主播配置商品播放列表和置顶时间安排。所有实时功能基于 WebSocket 驱动，带轮询降级。移动端优先设计，针对竖屏视频（9:16 比例）优化。
AI Hub
跑 Skill 需要模型接口？
AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@ecom_liu
许可证MIT
版本1.0.0
依赖0