メニュー
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 ページを確認してインストールできます。
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
SOC 職業分類に基づく
| 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 |