mcpField
H
hwc-realtime-streaming

hwc-realtime-streaming

github.com/thehotwireclubDevelopment152214 installsUpdated 3w ago
Repository

About hwc-realtime-streaming

hwc-realtime-streaming is a skill for implementing push-driven Hotwire behavior with Turbo Streams and Stimulus. It covers transport choices, stream actions, event ordering, and multi-tab considerations.

Key features

  1. 01Transport and delivery selection
  2. 02Turbo Stream action design
  3. 03Stream orchestration guidance
  4. 04Ordering and idempotency checks
  5. 05Multi-tab synchronization patterns

Use cases

  1. 01Adding inline stream updates
  2. 02Building real-time combobox updates
  3. 03Coordinating playlist updates
  4. 04Animating list changes

Install

Copy the command and run it in a terminal.

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

After installing, type/hwc-realtime-streamingin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with 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

Details

From the project README

Real-Time & Streaming

Implement push-driven Hotwire behavior with Turbo Streams and Stimulus.

Core Workflow

  1. Identify transport and delivery shape: WebSocket, SSE, inline stream tags, or server response streams.
  2. Choose default Turbo Stream actions first; add custom actions only when defaults are insufficient.
  3. Keep stream actions small and deterministic; avoid embedding arbitrary scripts in stream payloads.
  4. Separate stream orchestration from domain UI concerns (forms, media, navigation).
  5. Verify ordering, idempotency, and multi-tab behavior for all real-time updates.

Guardrails

  • Prefer append/prepend/replace/update/remove/before/after/refresh before custom actions.
  • Keep cross-tab sync explicit (BroadcastChannel/localStorage) and scope it to same-device semantics.
  • Use view transitions only where animation meaningfully improves state-change clarity.
  • Validate failure modes for delayed/out-of-order messages.

Load References Selectively

Open only the file needed for the current request.

  • Inline client-side stream tags: references/2023-08-01-turbo-streams-inline-stream-tags.md
  • Custom Turbo Stream actions: references/2023-08-15-turbo-streams-custom-stream-actions.md
  • Advanced playlist orchestration via custom actions: references/2023-10-10-turbo-streams-custom-stream-actions-video-playlist-management.md
  • LocalStorage-backed stream state: references/2024-01-30-turbo-streams-custom-stream-actions-localstorage.md
  • List animations with View Transitions: references/2025-06-10-turbo-streams-list-animation-view-transitions.md
  • Real-time combobox updates: references/2024-03-12-hotwire-combobox-with-real-time-data.md
  • Inter-tab communication patterns: references/2023-11-21-stimulus-inter-tab-communication.md
  • Custom stream action for history pushState: references/2026-04-14-turbo-streams-custom-stream-actions-push-state.md

Use references/INDEX.md for the full catalog.

Escalate to Neighbor Skills

  • Pull-based navigation/history concerns: use hwc-navigation-content
  • Form validation and submit lifecycle concerns: use hwc-forms-validation
  • Media playback/upload interactions: use hwc-media-content
  • Generic loading/progress/transition UX: use hwc-ux-feedback
  • Base Stimulus API questions outside streaming: use hwc-stimulus-fundamentals

Comments

Markdown supported