Does this skill help with Stimulus naming conventions?

Yes, it provides standardized naming conventions for controllers, targets, and actions to ensure your Stimulus code is idiomatic and maintainable.

Is this skill updated for the latest Rails versions?

Yes, it includes modern patterns for Rails 7.1 and above, including Turbo Morphing and the global refresh functionality.

When should I use Turbo Frames versus Turbo Streams?

Use Turbo Frames for self-contained component navigation or inline editing. Use Turbo Streams when you need to update multiple parts of a page simultaneously or broadcast updates to many users.

What is the primary benefit of using Hotwire Patterns?

It allows developers to create fast, interactive user experiences in Rails applications by sending HTML over the wire, significantly reducing the need for complex custom JavaScript.

Hotwire Patterns for Rails

Name: Hotwire Patterns for Rails
Author: chaserx

bychaserx

0•

Design Tools

Implements interactive Ruby on Rails user interfaces using Turbo and Stimulus patterns to minimize custom JavaScript.

This skill provides specialized guidance for building modern, reactive Rails applications using the Hotwire stack (Turbo and Stimulus). It helps developers navigate the complexities of HTML-over-the-wire by providing optimized patterns for Turbo Frames, Turbo Streams, and Stimulus controllers. Whether you are implementing inline editing, real-time notifications via ActionCable, or complex lazy-loading UI components, this skill ensures your implementation follows Rails best practices, maintains progressive enhancement, and optimizes performance.

Key Features

01Optimized Turbo Frame patterns for inline editing and scoped navigation

020 GitHub stars

03Real-time DOM update strategies using Turbo Streams and ActionCable

04Stimulus controller conventions for maintainable client-side behavior

05Implementation checklists for performance and progressive enhancement

06Support for Rails 7.1+ features like Turbo Morphing and Page Refresh

Use Cases

01Building live dashboards and notification systems with server-side broadcasting

02Creating seamless inline editing experiences without full page reloads

03Implementing infinite scroll and lazy-loaded content sections

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add chaserx/cpc hotwire-patterns

For use in Claude.ai and ChatGPT

Download Skill