| name | ruby-ui-stimulus |
| description | Use when writing, reviewing, or debugging a Stimulus controller for a ruby_ui Phlex component — controller lifecycle, state via values, DOM via targets, inter-controller communication via outlets, and the ruby_ui-specific data-attribute / naming / registration conventions. Covers how a Phlex component wires Stimulus through `data:` in `default_attrs`. Adapted from The Hotwire Club skills (MIT); see NOTICE.md. |
RubyUI Stimulus conventions
RubyUI adds interactivity with Stimulus controllers colocated with each Phlex
component: gem/lib/ruby_ui/<component>/<component>_controller.js. The component
class wires the controller through the data: hash returned by default_attrs.
There is no custom helper/DSL — everything is plain Phlex attributes plus
Stimulus conventions.
This skill covers client-side interactivity via Stimulus, which is the norm
for RubyUI components. Turbo (Frames/Streams) is out of scope here — it is only
used server-driven, and today the sole case is DataTable.
Core workflow
Building or changing a Stimulus-backed component:
- Write the controller at
gem/lib/ruby_ui/<component>/<component>_controller.js,
extending Controller from @hotwired/stimulus. Keep a clean lifecycle
(connect/disconnect) — see the guardrails below.
- Model the contract with statics, not ad-hoc DOM reads:
static values for reactive state (openValue, optionsValue, …).static targets for the DOM nodes the controller touches.static outlets for talking to sibling/child controllers.
Prefer these over reading or querying the DOM by hand.
