hotwire-patterns_skill

Overview

This skill provides pragmatic Stimulus and Turbo patterns for building modern Rails frontends with Hotwire. It focuses on server-rendered HTML enhanced by small, reusable JavaScript controllers and Turbo-driven partial updates. The guidance emphasizes progressive enhancement, minimal JS, and keeping business logic on the server.

How this skill works

It inspects code and markup related to Stimulus controllers, Turbo frames, and Turbo streams and suggests patterns, helpers, and integration tips. It recognizes data-controller, data-action, turbo_frame, turbo_stream, and related attributes to recommend idiomatic implementations. It also suggests view helper usage and ways to prevent Turbo when needed.

When to use it

• Adding interactive behaviors with minimal JavaScript (Stimulus controllers)
• Updating parts of a page without a full refresh (Turbo Frames)
• Broadcasting real-time UI changes to multiple clients (Turbo Streams)
• Progressive enhancement where features work without JavaScript
• Converting traditional Rails UJS flows to Hotwire patterns

Best practices

• Prefer server-rendered HTML and use Stimulus for state and DOM behavior only
• Keep controllers small: one responsibility per Stimulus controller
• Use Turbo Frames for targeted partial updates and Turbo Streams for multi-target real-time changes
• Use view helpers (turbo_frame_tag, data attributes) to keep markup consistent and testable
• Guard non-JS behavior so pages work without JavaScript; enhance, don’t replace the server flow

Example use cases

• Toggle UI sections with a small Stimulus controller that manages open state and ARIA attributes
• Paginate or lazy-load lists using a turbo_frame that replaces its contents on navigation
• Append new records in real time using turbo_stream.prepend from server broadcasts
• Enhance forms with Stimulus for client-side validation and let Turbo submit and replace the form with server-rendered responses
• Disable Turbo for file downloads or external links by adding data-turbo or data-turbo-frame attributes