القائمة
Use when writing Hotwire (Turbo/Stimulus) code in Rails - enforces dom_id helpers, morph updates, focused Stimulus controllers, and JavaScript private methods
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when writing Rails controllers or implementing state changes - enforces resource extraction, thin controllers delegating to models, params.expect, and controller concerns for scoping
Use when designing database schema, writing migrations, or making data storage decisions - enforces UUIDs, account_id multi-tenancy, no foreign keys, and proper index patterns
Use when writing background jobs or async operations - enforces thin job wrappers (3-5 lines) that delegate to models using _later/_now naming pattern
Use when writing Rails models - enforces state-as-records not booleans, concerns as adjectives namespaced under model, and concern extraction triggers
Use when naming classes, methods, routes in vanilla Rails codebases - enforces concern adjectives (-able/-ible only), no bangs for state, resource naming cascade, and commit message format
Use when defining Rails routes, organizing controller directories, or adding resources - enforces resource extraction, shallow nesting, resolve helpers, and module scoping
| name | vanilla-rails-hotwire |
| description | Use when writing Hotwire (Turbo/Stimulus) code in Rails - enforces dom_id helpers, morph updates, focused Stimulus controllers, and JavaScript private methods |
37signals Hotwire conventions beyond the official docs.
Always dom_id, never string interpolation:
<%# Wrong %>
<%= turbo_stream.replace "card_#{@card.id}" do %>
<%# Right %>
<%= turbo_stream.replace dom_id(@card) do %>
<%= turbo_stream.replace [ @card ] do %>
Prefixed dom_id for granular updates:
dom_id(@card) # "card_abc123"
dom_id(@card, :header) # "header_card_abc123"
dom_id(@card, :status_badge) # "status_badge_card_abc123"
Always method: :morph for replacements (avoids layout shift, preserves scroll):
<%= turbo_stream.replace dom_id(@card, :status), method: :morph do %>
<%= render "cards/status", card: @card %>
<% end %>
Morph for updates. append/prepend for new items. remove for deletions.
One purpose per controller. Split large controllers.
Private methods with # prefix — only methods called from data-action are public:
export default class extends Controller {
#debounceTimer = null // Private field
copy() { // Public - called from data-action
navigator.clipboard.writeText(this.sourceTarget.value)
this.#showNotification()
}
#showNotification() { // Private - internal only
this.element.classList.add('success')
}
}
Public methods: Those in data-action="controller#method" + lifecycle (connect, disconnect, *ValueChanged, *TargetConnected)
Private methods: Everything else — helpers, callbacks, utilities. Add #.
No business logic in Stimulus. Controllers coordinate UI only. Validations and data transforms go in Rails.
Structure partials with prefixed dom_id for targeted updates:
<article id="<%= dom_id(card) %>" class="card">
<div id="<%= dom_id(card, :status) %>">
<%= render "cards/status", card: card %>
</div>
<div id="<%= dom_id(card, :header) %>">
<%= render "cards/header", card: card %>
</div>
</article>
| Red flag | Fix |
|---|---|
"card_#{@card.id}" | dom_id(@card) |
turbo_stream.replace without method: :morph | Add method: :morph |
Helper method without # | Add # prefix |
| One Stimulus controller doing 5+ things | Split into focused controllers |
| Validations in JavaScript | Move to Rails model |
| Animation logic in Stimulus | Use CSS transitions |