菜单
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