メニュー
Create and manage Stimulus controllers for reactive UI interactions with Hotwire
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create and manage Solid Queue background jobs with perform_now vs perform_later patterns
Perform deep critical analysis of changes with focus on performance vs sustainability trade-offs
Add controllers and routes following project patterns for organizer namespaces, strong params, and Turbo
Build Rails forms with Tailwind CSS, Turbo integration, and strong params validation
Write database migrations for PostgreSQL with PostGIS, UUID primary keys, enums, and counter caches
Create and modify Rails models following project conventions for STI, enums, validations, counter caches, and scopes
| name | stimulus |
| description | Create and manage Stimulus controllers for reactive UI interactions with Hotwire |
| license | MIT |
data-controller and data-actionapp/javascript/
application.js — Importmap setup, Turbo, controllers, Flowbite
controllers/
application.js — Stimulus Application.start()
index.js — eagerLoadControllersFrom("controllers", application)
dark_mode_controller.js — Example controller
swap_controller.js
scroller_controller.js
round_timer_controller.js
date_controller.js
date_calendar_controller.js
// app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
const application = Application.start()
application.debug = false
window.Stimulus = application
export { application }
// app/javascript/controllers/index.js
import { application } from "controllers/application"
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ["elementName"];
static values = { defaultValue: String };
initialize() {
// Called when controller is instantiated
}
connect() {
// Called when element is connected to DOM
}
disconnect() {
// Called when element is removed from DOM
}
myAction(event) {
// Action handler
}
}
<!-- Single controller -->
<div data-controller="dark-mode">
<button data-action="click->dark-mode#toggle">Toggle</button>
</div>
<!-- Multiple controllers -->
<div data-controller="controller-one controller-two">
<button data-action="controller-one#action controller-two#action">
Trigger both
</button>
</div>
<!-- With targets -->
<div data-controller="scroller" data-scroller-target-name="scrollable">
<div data-scroller-target="scrollable"></div>
</div>
click->controller#action — click event on element triggers actionturbo:load->controller#action — Turbo page loadturbo:frame-load->controller#action — Turbo frame loadkeyup->controller#action — key eventsinput->controller#action — input eventsclick->controller#action1 click->controller#action2initialize() sets class on <html>; toggle() switches themeconnect()/disconnect() on controllersturbo:frame-load action for frame-specific initializationtarget: "_top" on turbo_frame_tag opens content in full pageapp/javascript/application.js imports Turbo, controllers, Flowbitecontrollers/*_controller.js via stimulus-loadingapp/javascript/application.js — Entry point with all importsapp/javascript/controllers/application.js — Stimulus app initializationapp/javascript/controllers/index.js — Controller registrationapp/javascript/controllers/dark_mode_controller.js — Example: initialize/toggle pattern