메뉴
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