stimuluslisted
Install: claude install-skill ghozimahdi/gm-aiagent-plugins
## Stimulus Patterns
### When to Use
- Toggle visibility (show/hide elements)
- Form validation (client-side only)
- UI interactions (dropdowns, modals, tabs, tooltips)
- Copy to clipboard
- Animations and transitions
### When NOT to Use
- Server communication → use Turbo Frames/Streams
- URL manipulation → Turbo handles it
- Complex state management → consider Turbo Streams
- Anything >100 lines → consult team first
### Basic Controller
```javascript
// app/javascript/controllers/toggle_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["content"]
static values = { open: { type: Boolean, default: false } }
toggle() {
this.openValue = !this.openValue
}
openValueChanged() {
this.contentTarget.classList.toggle("hidden", !this.openValue)
}
}
```
```erb
<div data-controller="toggle">
<button data-action="toggle#toggle">Toggle</button>
<div data-toggle-target="content" class="hidden">
Content here
</div>
</div>
```
### File Placement
| Location | Purpose |
|----------|---------|
| `app/javascript/controllers/` | Shared across all namespaces |
| `app/javascript/controllers/t/` | Talent (`/t`) specific |
| `app/javascript/controllers/c/` | Client org (`/c`) specific |
| `app/javascript/controllers/s/` | Support org (`/s`) specific |
| `app/javascript/controllers/admin/` | Admin specific |
### Naming Convention
Controllers follow kebab-case with double-dashes for namespaces