hotwire-patterns_skill

Overview

This skill implements Hotwire patterns for Rails 8.1 using Turbo Frames, Turbo Streams, and Stimulus controllers. It provides practical patterns, test examples, and a workflow checklist to build interactive UIs with minimal custom JavaScript. Use it to structure partial updates, real-time DOM changes, and small client-side behaviors.

How this skill works

The skill inspects UI intentions and suggests the right Hotwire pattern: Turbo Frames for scoped partial updates and navigation, Turbo Streams for server-pushed DOM changes, and Stimulus for lightweight client interactions. It supplies sample markup, controller snippets, and test examples (system and request specs) so you can implement and verify each pattern. It also includes debugging tips and a checklist to ensure reliable behavior with and without JavaScript.

When to use it

• Inline edit or scoped replacement of a page region (use Turbo Frame).
• Form submission that needs multiple DOM updates (use Turbo Stream).
• Real-time feeds, notifications, or live updates (use Turbo Streams with ActionCable).
• Small UI interactions like toggles or validation hints (use Stimulus).
• Lazy-loading paginated content or comments (Turbo Frame with src and loading).

Best practices

• Choose the smallest scope that solves the interaction (frame over full-page reload).
• Return the correct response format: HTML for frames, text/vnd.turbo-stream.html for streams.
• Test with and without JavaScript and add system specs that exercise real flows.
• Match frame IDs and dom_id exactly; validate Accept header in request specs.
• Keep Stimulus controllers small and focused; use data-action and data-target conventions.

Example use cases

• Inline post editing: load the edit form inside a turbo_frame_tag and replace only that post element.
• Adding comments: POST returns a turbo_stream to prepend the new comment and update flash.
• Infinite scroll: a frame wraps the list with a lazy src that fetches next page when needed.
• Modal dialogs: load modal content on demand in a Turbo Frame to avoid heavy JS modals.
• Flash messages: after_action converts flash into turbo_stream updates for consistent UX.