hotwire-patterns_skill

Overview

This skill is a complete guide to implementing Hotwire in Rails apps, covering Turbo Drive, Turbo Frames, Turbo Streams, and Stimulus controllers. It focuses on practical patterns for partial page updates, real-time broadcasts, and lightweight JavaScript behaviors. Use it to standardize Hotwire usage across projects and avoid common pitfalls.

How this skill works

The guide explains when to use Turbo Drive for full-page navigation and when to scope updates with Turbo Frames. It shows how to wire Turbo Streams to ActionCable broadcasts for real-time updates and how to respond with turbo_stream formats on form submissions. Stimulus patterns demonstrate targets, values, actions, outlets, and lifecycle cleanup to keep client behavior predictable.

When to use it

• Implement partial page updates without writing custom JS (Turbo Frames)
• Add real-time features via Turbo Streams + ActionCable broadcasts
• Return multi-element DOM changes after form submit with turbo_stream responses
• Write Stimulus controllers for form interactions, search, and component behavior
• Debug Turbo-related issues: frames not updating, streams not subscribing, or actions not firing

Best practices

• Always match turbo_frame_tag IDs between trigger and response; prefer dom_id(model) for model-scoped frames
• Return 422 status for form validation errors in turbo_stream responses to surface errors correctly
• Guard target access in Stimulus controllers (use has*Target checks) and clean up timers/listeners in disconnect to avoid leaks
• Add ARIA live regions for dynamic content (aria-live="polite") to support screen readers
• Use data-turbo="false" to opt out of Turbo Drive for external links or full-page form flows

Example use cases

• Inline editing: wrap record partials in model-scoped turbo_frame_tag(dom_id(model)) and render the form into the same frame
• Live task list: broadcast create/update/destroy from model callbacks and subscribe with turbo_stream_from in the index view
• Search UI: Stimulus controller fetches results and updates a results target; guard for missing targets and use debounce via values
• Form validation: respond_to format.turbo_stream with turbo_stream.replace('form', partial: 'form'), status: :unprocessable_entity
• Lazy-loaded comments: turbo_frame_tag with src and loading: :lazy to fetch content on demand