skills.rest
joshyorko
joshyorkoCOMMUNITY
Explore all skills by this author →
Website𝕏@JoshuaYorkoGitHub

37signals-turbo

Implement Turbo Streams, Turbo Frames, and morphing in Rails 8+ apps.

1|Updated Feb 3, 2026
Search Tags:#real-time#rails#hotwire#morph#turbo-streams#turbo-frames
One-click install
npx skills add https://github.com/joshyorko/agent-skills --skill 37signals-turbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 37signals-turbo
Source: https://github.com/joshyorko/agent-skills/tree/main/plugins/rails-37signals-patterns/skills/37signals-turbo
Command: npx skills add https://github.com/joshyorko/agent-skills --skill 37signals-turbo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turbo-powered UIs reduce the need for custom JavaScript by delivering real-time updates through server-side rendering and live broadcasts. This skill provides patterns, examples, and best practices to compose reactive interfaces using Turbo Streams, Turbo Frames, and morphing in Rails 8+ apps.

Core Features & Use Cases

  • Real-time updates with Turbo Streams for lists, cards, and feeds
  • Lazy-loaded content and modals with Turbo Frames
  • Morphing for smooth, stateful UI updates (form-heavy components)

Quick Start

Enable Turbo-driven real-time UI updates in a Rails feature by applying streams, frames, and morphing in your controllers and views.

Frequently Asked Questions about 37signals-turbo

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

FAQPage Schema
How do I broadcast real-time UI updates in Rails without writing custom JavaScript?▼

You can broadcast real-time UI updates in Rails by applying Turbo Streams to deliver server-rendered HTML directly to connected clients. This skill provides patterns to dynamically update lists, cards, and feeds without custom JavaScript.

What is the best way to handle lazy-loaded content and modals in a Hotwire Rails application?▼

Handling lazy-loaded content and modals in a Hotwire Rails application is best done using Turbo Frames. This skill demonstrates how to isolate sections of your page to load content dynamically and manage modal interactions cleanly.

How do Turbo Streams and Turbo Frames work together for reactive interfaces?▼

Turbo Streams and Turbo Frames work together by using frames to scope updates to specific page sections and streams to broadcast server-rendered HTML changes. This skill guides composing these elements for dynamic lists and live forms.

Can I use Turbo morphing for smooth, stateful updates in form-heavy Rails components?▼

Yes, you can use Turbo morphing for smooth, stateful updates in form-heavy Rails components. This skill provides guidance on applying morph-based updates to preserve UI state while refreshing server-rendered HTML content.

Does this Turbo Streams approach work with Rails 8 applications?▼

Yes, the Turbo Streams and Turbo Frames patterns provided by this skill are designed specifically for Rails 8+ applications. It enforces server-rendered HTML patterns to deliver real-time updates and live broadcasts effectively.

Related Skills

Explore More Software Engineering Skills→
nschneblenschneble

hotwire-patterns

Implement Hotwire interactivity in Rails 8+ apps using Turbo Frames, Turbo Streams, and Stimulus.

Community
Intermediate
wpankwpank
11

realtime-react-hooks

Create React hooks for real-time data via SSE and WebSockets with SWR integration.

Community
Intermediate
newstlernewstler
20

hotwire-patterns

Apply Turbo and Stimulus patterns to Rails CRUD views for interactive interfaces.

Community
Intermediate
freshtechbrofreshtechbro
682

barba-js

Facilitate AJAX-driven page transitions with lifecycle hooks and custom animations.

Community
Intermediate