rails-cto-stimulus

The Stimulus controller skill. Governs frontend interactivity in a Hotwire project.

What it does

Enforces a reuse-first philosophy for Stimulus: before writing a new controller, check if an existing one handles the pattern. Reach for generic, composable controllers (toggle, dropdown, dialog, dismiss, autosubmit) over one-off user-settings-form controllers.

Rules the skill enforces:

• Reuse first, create second. Search for an existing controller before writing a new one.
• Small, focused controllers. One responsibility per controller. Prefer composition via multiple data-controller attributes.
• Targets, not selectors. Never use document.querySelector inside a controller — declare a target.
• Values for config, not constants. Configuration comes from HTML data-*-value attributes, not JS module-level constants.
• Turbo-aware. Controllers that modify state should use Turbo Streams for feedback, not hand-rolled fetch calls.
• Works with better-stimulus. Depends on the better-stimulus@obie-skills marketplace skill for additional best-practice context.

When it triggers

• Creating or modifying any file under app/javascript/controllers/
• Wiring a Stimulus controller into an ERB template
• Integrating JavaScript behavior with Turbo Streams or Frames
• When you mention stimulus, controller, data-action, data-controller, targets, values, or ask about frontend interactivity

Example

You: Add a "copy to clipboard" button on the bookmark page.

Agent: [invokes /rails-cto-stimulus]

       There's already a generic `clipboard` controller in
       app/javascript/controllers/clipboard_controller.js. I'll
       wire the button to use it rather than creating a new
       controller.

       [updates the ERB template with data-controller="clipboard"
        and data-action="click->clipboard#copy"]
       [invokes /rails-cto-erb and /rails-cto-tailwind after the
        .html.erb change]

View source

skills/rails-cto-stimulus/SKILL.md on GitHub →