stimulus

Original：🇺🇸 English

Translated

Build Stimulus controllers from scratch through production. Full lifecycle - create, debug, test, optimize, integrate with Turbo. Covers targets, values, actions, outlets, and UI patterns.

1installs

Sourcefaqndo97/ai-skills

Added on2026-02-08

NPX Install

npx skill4agent add faqndo97/ai-skills stimulus

SKILL.md Content

View Translation Comparison →

<essential_principles>

How Stimulus Works

Stimulus is a modest JavaScript framework that connects JavaScript behavior to HTML via data attributes. It doesn't render HTML—it enhances existing HTML with interactivity.

1. HTML-First Philosophy

State lives in the DOM, not JavaScript. Controllers can be discarded between page changes and reinitialize from cached HTML. Design controllers to read state from data attributes and restore themselves on reconnection.

2. Convention Over Configuration

Stimulus uses predictable naming conventions:

Controller:
```
data-controller="clipboard"
```
Targets:
```
data-clipboard-target="source"
```
Actions:
```
data-action="click->clipboard#copy"
```
Values:
```
data-clipboard-url-value="/api/copy"
```

Classes:

data-clipboard-supported-class="visible"

Outlets:
```
data-clipboard-result-outlet="#result"
```

3. Lifecycle Awareness

Controllers have three lifecycle callbacks:

```
initialize()
```
- Called once when controller is instantiated
```
connect()
```
- Called when controller is connected to DOM (can happen multiple times with Turbo)
```
disconnect()
```
- Called when controller is removed from DOM

Always clean up in

disconnect()

what you set up in

connect()

(timers, event listeners, observers).

4. Scope Isolation

Each controller only sees elements within its scope (the element with

data-controller

and its descendants). Targets must be within scope. Use outlets to communicate across controller boundaries.

5. Progressive Enhancement

Build HTML that works without JavaScript first. Use Stimulus to enhance, not replace. Check for API support before using features:

javascript

connect() {
  if ("clipboard" in navigator) {
    this.element.classList.add(this.supportedClass)
  }
}

</essential_principles>

<intake> **What would you like to do?**

Build a new controller
Debug an existing controller
Add a feature to a controller
Review controller(s) for best practices
Optimize performance
Implement a UI pattern (modal, dropdown, tabs, etc.)
Integrate with Turbo
Handle forms
Something else

Wait for response before proceeding. </intake>

<routing> | Response | Workflow | |----------|----------| | 1, "new", "create", "build", "start" | `workflows/build-new-controller.md` | | 2, "broken", "fix", "debug", "crash", "bug", "not working" | `workflows/debug-controller.md` | | 3, "add", "feature", "extend", "modify" | `workflows/add-feature.md` | | 4, "review", "audit", "check", "best practices", "patterns" | `workflows/review-controller.md` | | 5, "slow", "optimize", "performance", "fast", "memory" | `workflows/optimize-performance.md` | | 6, "modal", "dropdown", "tabs", "accordion", "toggle", "UI", "pattern" | `workflows/implement-ui-pattern.md` | | 7, "turbo", "frames", "streams", "hotwire" | `workflows/integrate-turbo.md` | | 8, "form", "validation", "submit", "input" | `workflows/handle-forms.md` | | 9, other | Clarify, then select workflow or references |

After reading the workflow, follow it exactly. </routing>

<verification_loop>

After Every Change

Does it connect? Check browser console for Stimulus connection messages
Do targets resolve? Verify
```
this.hasXxxTarget
```
returns true
Do actions fire? Add temporary console.log in action methods
Does it clean up? Navigate away and back - no errors, no memory leaks

javascript

// Debug mode - add to application.js
application.debug = true

Report to the user:

"Controller connects: ✓"
"Targets found: X of Y"
"Actions working: ✓/✗"
"Ready for testing" </verification_loop>

<reference_index>

Domain Knowledge

All in

references/

:

Core APIs: architecture.md, targets.md, values.md, actions.md, outlets.md, classes.md Ecosystem: stimulus-use.md, ui-patterns.md Integration: turbo-integration.md Quality: testing-debugging.md, performance.md, anti-patterns.md </reference_index>

<workflows_index>

Workflows