mcpField
H
hwc-realtime-streaming

hwc-realtime-streaming

github.com/lucianghinda开发43039 次安装今天更新
代码仓库

关于 hwc-realtime-streaming

用于借助 Turbo Streams 和 Stimulus 实现推送式 Hotwire 界面的技能，指导开发者选择传输方式与流操作，并检查消息顺序和多标签页行为。

主要功能

  1. 01选择 WebSocket、SSE 或流标签
  2. 02选择默认 Turbo Stream 操作
  3. 03处理顺序与幂等性
  4. 04检查延迟及乱序消息

适用场景

  1. 01规划 Hotwire 实时更新路径
  2. 02实现 Turbo Stream 操作
  3. 03审查多标签页更新行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/lucianghinda/superpowers-ruby --skill hwc-realtime-streaming

安装后在 Claude Code 中输入/hwc-realtime-streaming确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
2023-08-01-turbo-streams-inline-stream-tags.md
2023-08-15-turbo-streams-custom-stream-actions.md
2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
2023-11-21-stimulus-inter-tab-communication.md
2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
2024-03-12-hotwire-combobox-with-real-time-data.md
2025-06-10-turbo-streams-list-animation-view-transitions.md
INDEX.md

详细介绍

实时与流式传输

使用 Turbo Streams 和 Stimulus 实现推送驱动的 Hotwire 行为。

核心工作流

  1. 确定传输方式和交付形式：WebSocket、SSE、内联流标签或服务端响应流。
  2. 优先选择默认的 Turbo Stream 操作；只有默认操作不够用时，才添加自定义操作。
  3. 保持流操作精简且具有确定性；避免在流载荷中嵌入任意脚本。
  4. 将流编排与领域 UI 关注点（表单、媒体、导航）分开。
  5. 验证所有实时更新的顺序、幂等性和多标签页行为。

防护措施

  • 优先使用 append/prepend/replace/update/remove/before/after/refresh，再考虑自定义操作。
  • 明确跨标签页同步方式（BroadcastChannel/localStorage），并将其限定为同一设备上的语义。
  • 仅在动画能切实提升状态变化的清晰度时使用视图过渡。
  • 验证延迟消息和乱序消息情况下的失败模式。

有选择地加载参考资料

仅打开当前请求所需的文件。

  • 内联客户端流标签：references/2023-08-01-turbo-streams-inline-stream-tags.md
  • 自定义 Turbo Stream 操作：references/2023-08-15-turbo-streams-custom-stream-actions.md
  • 通过自定义操作进行高级播放列表编排：references/2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
  • 由 LocalStorage 支持的流状态：references/2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
  • 使用 View Transitions 为列表添加动画：references/2025-06-10-turbo-streams-list-animation-view-transitions.md
  • 实时组合框更新：references/2024-03-12-hotwire-combobox-with-real-time-data.md
  • 标签页间通信模式：references/2023-11-21-stimulus-inter-tab-communication.md

完整目录请参阅 references/INDEX.md。

转交给相邻技能

  • 拉取式导航/历史记录问题：使用 hwc-navigation-content
  • 表单验证和提交生命周期问题：使用 hwc-forms-validation
  • 媒体播放/上传交互：使用 hwc-media-content
  • 通用加载/进度/过渡 UX：使用 hwc-ux-feedback
  • 流式传输以外的 Stimulus 基础 API 问题：使用 hwc-stimulus-fundamentals

评论

支持 Markdown