---
name: "stimulus-js-html-controllers"
description: "Attach lightweight, maintainable JavaScript behaviors to server-rendered HTML via Stimulus."
metadata:
  author: "Basecamp"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "write stimulus controller"
  - "data-action stimulus"
  - "data-target stimulus"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Stimulus JS Modest JavaScript Controllers for HTML

Implements Hotwire Stimulus: creating Controller classes, binding data-controller, data-action, and data-target attributes, managing values (data-[name]-value), classes, and cleanup in disconnect().

## When to Invoke
Invoke this skill whenever you need to:
- write stimulus controller
- data-action stimulus
- data-target stimulus

## Execution SOP & Rules
1. Import Controller from '@hotwired/stimulus' and export default class extends Controller { ... }.
2. Declare targets: static targets = ['source', 'button']; and values: static values = { timeout: Number }.
3. Attach in HTML: <div data-controller='clipboard' data-clipboard-timeout-value='2000'>.
4. Bind action: <button data-action='click->clipboard#copy' data-clipboard-target='button'>Copy</button>.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.