mcpField
H
hwc-realtime-streaming

hwc-realtime-streaming

github.com/thehotwireclub開発152214 回インストール3 週間前に更新
リポジトリ

hwc-realtime-streaming について

hwc-realtime-streaming は、Turbo Streams と Stimulus でプッシュ駆動の Hotwire 動作を実装するスキルです。通信方式、ストリーム操作、イベント順序、複数タブへの対応を扱います。

主な機能

  1. 01通信方式と配信形態の選定
  2. 02Turbo Stream操作の設計
  3. 03ストリームの調整方針
  4. 04順序と冪等性の確認
  5. 05複数タブ同期パターン

活用シーン

  1. 01インラインのストリーム更新追加
  2. 02リアルタイムコンボボックスの構築
  3. 03プレイリスト更新の調整
  4. 04リスト変更のアニメーション

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-realtime-streaming

インストール後、Claude Code で/hwc-realtime-streamingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
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
2026-04-14-turbo-streams-custom-stream-actions-push-state.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
  • 履歴の pushState に対応するカスタムストリームアクション：references/2026-04-14-turbo-streams-custom-stream-actions-push-state.md

全カタログについては references/INDEX.md を使用します。

関連スキルに引き継ぐ

  • プル型のナビゲーションや履歴に関する懸念事項：hwc-navigation-content を使用します
  • フォームの検証や送信ライフサイクルに関する懸念事項：hwc-forms-validation を使用します
  • メディアの再生やアップロードの操作：hwc-media-content を使用します
  • 一般的な読み込み、進行状況、遷移の UX：hwc-ux-feedback を使用します
  • ストリーミング以外の Stimulus API の基本的な質問：hwc-stimulus-fundamentals を使用します

コメント

Markdown 対応