skills.rest
ZempTime
ZempTimeCOMMUNITY
Explore all skills by this author →
Website𝕏@zemptimeGitHub

vanilla-rails-hotwire

Codifies Hotwire and Stimulus conventions for Rails apps to ensure stable UI updates.

3|Updated Dec 25, 2025
Search Tags:#hotwire#morph#stimulus#private-methods#turbo-rails#dom_id#rails-ui
One-click install
npx skills add https://github.com/ZempTime/zemptime-marketplace --skill vanilla-rails-hotwire
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vanilla-rails-hotwire
Source: https://github.com/ZempTime/zemptime-marketplace/tree/main/vanilla-rails/skills/hotwire
Command: npx skills add https://github.com/ZempTime/zemptime-marketplace --skill vanilla-rails-hotwire

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies Hotwire and Stimulus conventions for Rails apps to ensure stable, maintainable UI updates.

Core Features & Use Cases

  • Enforces dom_id usage for precise Turbo Stream targets and to avoid brittle string interpolation.
  • Promotes morph-based updates to minimize layout shifts and preserve scroll position.
  • Encourages small, focused Stimulus controllers with private methods and clear boundaries.
  • Provides guidance on view organization for granular, targetable updates.
  • Improves developer onboarding by providing an opinionated, repeatable UI pattern.

Quick Start

Enable the Hotwire conventions described in this Skill in your Rails project. Start by replacing ad-hoc DOM updates with dom_id targets, adopt morph for Turbo Streams, and refactor Stimulus controllers to be small and private.

Frequently Asked Questions about vanilla-rails-hotwire

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

FAQPage Schema
How do I target Turbo Streams in Rails without brittle string interpolation?▼

Use Rails dom_id helpers to target Turbo Streams. This ensures precise DOM element targeting and avoids brittle string interpolation by generating consistent, predictable HTML IDs for your Hotwire UI updates.

How do I prevent layout shifts and preserve scroll position during Hotwire DOM updates?▼

Adopt morph-based updates for your Turbo Streams to prevent layout shifts. Morphing minimizes visual disruption by intelligently patching the DOM rather than replacing entire blocks, which preserves user scroll position.

What is the best way to structure Stimulus controllers for maintainable Rails UIs?▼

Keep Stimulus controllers small and focused with clear boundaries. Enforce method privacy by using private methods for internal logic, ensuring only necessary actions are exposed as public HTML-called helpers.

How do I organize Rails views for granular Hotwire updates?▼

Organize Rails views to support granular, targetable updates by applying dom_id conventions. This separation allows Turbo Streams to precisely target individual components like cards, lists, and modals during partial renders.

Can I use this Hotwire convention set for existing Rails UI components like modals and lists?▼

Yes, these conventions apply directly to existing components such as cards, lists, and modals. Refactoring them to use dom_id targets and focused Stimulus controllers ensures stable, maintainable UI updates across your application.

Related Skills

Explore More Software Engineering Skills→
ShoebtamboliShoebtamboli
14

rails-hotwire

Build reactive Rails 7+ interfaces using Turbo and Stimulus.

Community
Intermediate
LaunchPadLabLaunchPadLab
1

turbo-patterns

Implement Hotwire Turbo patterns for Rails with frames, streams, and morphing.

Official
Intermediate
KaakatiKaakati
10

Turbo & Hotwire Patterns

Implement Turbo and Stimulus patterns for real-time Rails UI updates.

Community
Intermediate
mlbrightmlbright

hotwire-patterns

Implement Hotwire patterns with Turbo Frames, Turbo Streams, and Stimulus controllers in Rails.

Community
Intermediate