Hwc Realtime Streaming

Covers push-based real-time updates in Hotwire: Turbo Streams over WebSocket or SSE, custom stream actions, inline stream tags, and cross-tab state sync via BroadcastChannel or localStorage. The workflow pushes you toward default actions (append, prepend, replace) before writing custom ones, keeps stream orchestration separate from forms or media concerns, and includes references for view transition animations and inter-tab communication patterns. Use this when you need server-initiated updates or stream action choreography. If you're doing pull-based pagination or lazy loading, reach for hwc-navigation-content instead. The guardrails around idempotency and out-of-order messages are smart reminders that real-time systems fail in specific ways.

skills.sh installs: 215
GitHub stars: 153
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add thehotwireclub/hotwire_club-skills --skill hwc-realtime-streaming --agent claude-code

Installs into .claude/skills of the current project.

Files

Real-Time & Streaming

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

Core Workflow

Identify transport and delivery shape: WebSocket, SSE, inline stream tags, or server response streams.
Choose default Turbo Stream actions first; add custom actions only when defaults are insufficient.
Keep stream actions small and deterministic; avoid embedding arbitrary scripts in stream payloads.
Separate stream orchestration from domain UI concerns (forms, media, navigation).
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.