Builds real-time features with Turbo Streams: inline stream tags, custom stream actions, broadcasting over WebSocket, Turbo 8 morphing, optimistic UI with reconciliation, ULID-based optimistic identity, cross-tab synchronization, and list animations. Use when adding real-time updates, broadcasting, morphing, optimistic state, live notifications, or server-pushed content changes. Cross-references: stimulus-controllers for client-side orchestration, turbo-navigation-rendering for frame navigation, hotwire-native for mobile broadcasting.
npx claudepluginhub ether-moon/hotwire-frontend-skills --plugin hotwire-frontend-skillsThis skill is limited to using the following tools:
Build real-time, push-driven features using Turbo Streams with Rails. This skill covers stream delivery, custom actions, broadcasting, morphing, optimistic UI, cross-tab sync, and list animations.
examples/morphing-troubleshooting.mdhandbook/INDEX.mdhandbook/turbo-streams-api.mdhandbook/turbo-streams.mdreferences/INDEX.mdreferences/broadcasting-patterns.mdreferences/custom-stream-actions-video-playlist.mdreferences/custom-stream-actions.mdreferences/inline-stream-tags.mdreferences/inter-tab-communication.mdreferences/list-animations-view-transitions.mdreferences/optimistic-ui.mdreferences/turbo-8-morphing.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Share bugs, ideas, or general feedback.
Build real-time, push-driven features using Turbo Streams with Rails. This skill covers stream delivery, custom actions, broadcasting, morphing, optimistic UI, cross-tab sync, and list animations.
Look for lists, counters, notifications, status indicators, collaborative editing surfaces, and any UI that should reflect server-side changes without a full page reload.
.turbo_stream.erb templates): For request/response cycles — form submissions, AJAX actions.broadcasts_to, turbo_stream_from): For pushing updates to other users or tabs without a request.Pick the most precise action:
| Action | Use When |
|---|---|
append / prepend | Adding to lists |
replace | Swapping an entire element |
update | Changing inner content only |
remove | Deleting an element |
before / after | Positional insertion |
morph (method modifier on replace/update) | Preserving DOM state during complex updates |
refresh | Full page morph refresh (Turbo 8) |
| Custom action | When built-in actions are insufficient |
Prefer default actions first. Add custom actions only when defaults cannot express the intent.
dom_id for target IDs.[Current.account, resource] to prevent cross-account data leaks.BroadcastChannel or localStorage for cross-tab sync.Prefer turbo_stream response format over inline stream tags when the update originates from a form submission or controller action.
Scope broadcasts by tenant. Prevent data leaking across accounts.
# GOOD: Scoped to account
broadcasts_to [Current.account, :notifications]
# BAD: Global broadcast
broadcasts_to :notifications
Use morph for complex updates that need to preserve DOM state (form inputs, scroll position, focus).
Always provide an HTML fallback for non-Turbo clients using respond_to with both format.turbo_stream and format.html.
Keep stream payloads small. Send targeted partial updates, not entire page sections.
Avoid embedding <script> tags inside stream templates. Use custom stream actions instead.
Do not use fixed timeouts as a proxy for stream delivery. Listen for stream render events instead of setTimeout.
Keep cross-tab sync explicit using BroadcastChannel or localStorage — scope it to same-device semantics.
Use view transitions only where animation meaningfully improves state-change clarity.
For optimistic UI, always have a reconciliation strategy. The server response must correct any incorrect optimistic state. Use ULID-based identity when creating records optimistically.
Handle ActionCable disconnects explicitly. Listen for connection state changes and show a reconnection indicator. Do not silently drop updates.
| Topic | File |
|---|---|
| Inline stream tags | references/inline-stream-tags.md |
| Custom stream actions | references/custom-stream-actions.md |
| Broadcasting (ActionCable/Solid Cable) | references/broadcasting-patterns.md |
| Turbo 8 morphing | references/turbo-8-morphing.md |
| Optimistic UI / ULID identity | references/optimistic-ui.md |
| List animations / View Transitions | references/list-animations-view-transitions.md |
| Video playlist custom actions | references/custom-stream-actions-video-playlist.md |
| Inter-tab communication | references/inter-tab-communication.md |
| Morphing troubleshooting | examples/morphing-troubleshooting.md |
Full catalog: references/INDEX.md. API details: handbook/INDEX.md.
Out-of-scope requests: route back to frontend-craft for triage.