← ClaudeAtlas

rails-stimuluslisted

Use when writing Stimulus controllers with modern JavaScript patterns (ES2022 private fields, values, targets)
mickzijdel/rails-toolkit · ★ 0 · AI & Automation · score 70
Install: claude install-skill mickzijdel/rails-toolkit
# Rails Stimulus Patterns ## 0. Design Philosophy **Stimulus is "just sprinkles"** — Turbo handles the reactive application layer. Stimulus covers the last 10–20%. Always ask: can CSS alone solve this? Can Turbo handle it? Reach for Stimulus last. **Build behavior-based controllers, not resource-based ones.** A `ClipboardController` that copies text works everywhere. A `PinsController` with a `copyPIN()` method is dead weight. Think: showing/hiding, focusing inputs, sorting tables, tooltips — not page-specific resources. **Minimize dependencies.** Modern JS has excellent browser support. Check [youmightnotneedjquery.com](https://youmightnotneedjquery.com) before adding a library. Fewer dependencies = simpler upgrades. --- ## 1. Private Fields (ES2022) Use `#fieldName` / `#methodName()` / `get #propertyName()` for internal state, timers, and cached values — truly private, not just convention. ```javascript // auto_save_controller.js import { Controller } from "@hotwired/stimulus" import { submitForm } from "helpers/form_helpers" const AUTOSAVE_INTERVAL = 3000 export default class extends Controller { #timer disconnect() { this.submit() } async submit() { if (this.#dirty) { await this.#save() } } change(event) { if (event.target.form === this.element && !this.#dirty) { this.#scheduleSave() } } #scheduleSave() { this.#timer = setTimeout(() => this.#save(), AUTOSAVE_INTERVAL) } async #save() { this.#resetT