Why should I use private methods (# prefix) in Stimulus?

Marking internal helper methods with a # prefix distinguishes them from actions called directly from HTML, making the controller's public API clearer and preventing accidental external calls.

Does this skill help with Stimulus controller organization?

Yes, it enforces a single-purpose responsibility principle, helping you split bloated controllers into smaller, focused units that coordinate specific UI behaviors.

What are the benefits of using morph in Turbo Streams?

Morphing updates only the changed parts of the DOM, preserving scroll position and preventing jarring layout shifts compared to standard replacement.

How does this skill handle dom_id implementation?

It identifies and corrects manual string interpolation like 'card_#{@card.id}', replacing it with the standard Rails dom_id(@card) helper or array syntax for better consistency.

Vanilla Rails Hotwire

Name: Vanilla Rails Hotwire
Author: ZempTime

byZempTime

•

开发者工具

Enforces 37signals conventions for Hotwire development in Rails, including Turbo morphing and private Stimulus methods.

This skill optimizes Ruby on Rails development by enforcing professional conventions for the Hotwire framework (Turbo and Stimulus). It guides developers to use native Rails helpers like dom_id for element targeting, implements morphing for smoother UI updates that preserve scroll position, and ensures Stimulus controllers remain maintainable through private method encapsulation. By following these patterns, developers can create highly reactive interfaces that stay aligned with modern Rails best practices and avoid common pitfalls like layout shifts or bloated JavaScript controllers.

主要功能

01Standardizes Stimulus controllers with private JavaScript field/method syntax

02Enforces dom_id helper usage over manual string interpolation for Turbo targets

031 GitHub stars

04Prevents business logic leakage into JavaScript by keeping controllers UI-focused

05Guides granular view updates using prefixed container patterns

06Promotes Turbo Stream morphing to prevent layout shifts and preserve state

使用场景

01Implementing complex real-time UI updates with granular Turbo Stream targets

02Refactoring Rails views to use modern Hotwire morphing patterns for better UX

03Standardizing Stimulus JS codebases for team consistency and maintainability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zemptime/zemptime-marketplace hotwire

For use in Claude.ai and ChatGPT

Download Skill