Is this compatible with the Bali ViewComponent library?

Yes, it includes instructions on how to leverage existing Bali components for modals and dropdowns to avoid writing redundant Stimulus controllers.

When should I use Turbo Frames versus Turbo Streams?

Use Turbo Frames for updating a single, scoped section of a page during navigation or form submission. Use Turbo Streams when a single action needs to update multiple, independent parts of the page simultaneously.

How does it handle real-time updates?

The skill provides patterns for combining Turbo Streams with ActionCable (specifically Solid Cable in AFAL apps) to broadcast model changes directly to the browser.

Does this skill help with React integration in Rails?

Yes, it provides specific guidance on when to use React via Turbo Mount for complex widgets like diagrams or rich text editors, while keeping the rest of the UI in Hotwire.

Rails Hotwire Patterns

Name: Rails Hotwire Patterns
Author: Grupo-AFAL

byGrupo-AFAL

•

Design Tools

Implements high-performance interactive Rails interfaces using Turbo Frames, Turbo Streams, and Stimulus controllers.

This skill provides a comprehensive architectural guide for building modern, reactive Ruby on Rails applications using the Hotwire stack. It helps developers navigate complex UI decisions by providing a clear decision matrix for choosing between Turbo Frames for scoped updates, Turbo Streams for multi-target or real-time changes, and Stimulus for client-side logic. The skill ensures adherence to AFAL standards, including integration with Bali ViewComponents and the strategic use of React via Turbo Mount for complex widgets.

Key Features

01Best practices for Stimulus controller structure and data attributes

02Decision guide for choosing between Frames, Streams, Stimulus, and React

031 GitHub stars

04Real-time multi-target updates via Turbo Streams and ActionCable/Solid Cable

05Standardized patterns for Turbo Frame inline editing and lazy loading

06Integration guidance for Bali ViewComponents to prevent redundant JS logic

Use Cases

01Adding real-time notifications and live data broadcasts to Rails dashboards

02Implementing seamless inline editing and partial page updates without full reloads

03Creating interactive client-side behaviors like toggles, tabs, and form validations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add grupo-afal/claude-plugins hotwire-patterns

For use in Claude.ai and ChatGPT

Key Features

01Best practices for Stimulus controller structure and data attributes

02Decision guide for choosing between Frames, Streams, Stimulus, and React

031 GitHub stars

04Real-time multi-target updates via Turbo Streams and ActionCable/Solid Cable

05Standardized patterns for Turbo Frame inline editing and lazy loading

06Integration guidance for Bali ViewComponents to prevent redundant JS logic

Use Cases

01Adding real-time notifications and live data broadcasts to Rails dashboards

02Implementing seamless inline editing and partial page updates without full reloads

03Creating interactive client-side behaviors like toggles, tabs, and form validations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add grupo-afal/claude-plugins hotwire-patterns

For use in Claude.ai and ChatGPT