skills.rest
Grupo-AFAL
Grupo-AFALOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hotwire-patterns

Implement Hotwire Turbo Frames, Turbo Streams, and Stimulus behaviors in Rails UI interactions.

Updated Aug 23, 2026
Search Tags:#rails#hotwire#stimulus#turbo-streams#turbo-frames#bali
One-click install
npx skills add https://github.com/Grupo-AFAL/claude-plugins --skill hotwire-patterns-grupo-afal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hotwire-patterns
Source: https://github.com/Grupo-AFAL/claude-plugins/tree/main/rails-tools/skills/hotwire-patterns
Command: npx skills add https://github.com/Grupo-AFAL/claude-plugins --skill hotwire-patterns-grupo-afal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides concise, opinionated guidance for adding Hotwire interactivity to Rails applications so teams avoid fragile ad-hoc implementations and inconsistent UX. It helps decide when to use Turbo Frames, Turbo Streams, Stimulus, or React islands and documents common pitfalls, error handling, and testing strategies.

Core Features & Use Cases

  • Decision guidance: A quick table that maps common interaction needs to the right Hotwire primitive (Turbo Frame, Turbo Stream, Stimulus, React via Turbo Mount).
  • Patterns and examples: Inline editing, lazy-loading frames, modal/drawer frames, tabbed frames, multi-target stream updates, broadcasting, and Stimulus controller conventions.
  • Integrations and constraints: Advice on using Bali ViewComponents, testing (Minitest/Jest examples), performance tips, and error/status handling for 4xx/5xx responses.
  • Developer workflow: Recommendations for minimal implementations, progressive enhancement, and how to structure turbo_stream templates and controller responses.

Quick Start

Add Turbo Frames for scoped updates, Turbo Streams for multi-target or real-time broadcasts, and a Stimulus controller for client-side behavior to implement inline editing on the messages index.

Frequently Asked Questions about hotwire-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
When should I use Turbo Frames vs Turbo Streams in a Rails application?▼

Use Turbo Frames for scoped page updates like inline editing or lazy loading, and Turbo Streams for multi-target DOM replacements, real-time broadcasts, and broader UI interactions across your Rails application.

How do I implement inline editing with Hotwire and Stimulus in Rails?▼

Implement inline editing by combining Turbo Frames for scoped form updates with a Stimulus controller to manage client-side behavior and state changes during the editing interaction.

Can I integrate Hotwire patterns with Bali ViewComponents?▼

Yes, Hotwire patterns can integrate with Bali ViewComponents, providing opinionated guidance on component integration, naming conventions, and proper error and status handling for UI interactions.

What is the best way to handle real-time broadcasts in Rails using Turbo Streams?▼

The best way to handle real-time broadcasts is using Turbo Streams to deliver multi-target updates, structured through turbo_stream response templates and proper controller responses for progressive enhancement.

Does Hotwire work with React islands in Rails applications?▼

Yes, Hotwire works with React islands via Turbo Mount, allowing you to decide when to use React components instead of Turbo Frames, Turbo Streams, or Stimulus for specific UI interactions.

How do I test Hotwire interactions in Rails with Minitest and Jest?▼

Test Hotwire interactions by following established testing patterns that include Minitest examples for Rails server-side Turbo Stream responses and Jest examples for validating Stimulus controller behaviors.

Related Skills

Explore More Software Engineering Skills→
smaller-worldsmaller-world
4

rails-hotwire

Automate building reactive Rails apps with Hotwire, Turbo, and Stimulus.

Official
Intermediate
joshyorkojoshyorko

37signals-stimulus

Build focused Stimulus controllers for progressive enhancement in Rails apps.

Community
Advanced
nschneblenschneble

turbo-agent

Integrate Turbo Drive, Frames, and Streams into Rails 8.1+ applications.

Community
Advanced
sandeepmvlsandeepmvl
21

hotwire-turbo-stimulus

Implement Hotwire Turbo and Stimulus for Rails 8 UI interactivity.

Community
Intermediate