Stimulus Patterns

What it does

When your agent uses it

• Adding JavaScript behavior
• UI interactions
• Form enhancements
• Building reusable client-side components

Example prompts

• “Use the stimulus-patterns skill to build focused, single-purpose Stimulus controllers for progressive enhancement”
• “/stimulus-patterns”

Requirements

• Compatibility (from SKILL.md): Stimulus 3.2+, Turbo 8.0+, Importmap

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

1. 1Event delegation: One listener on parent, not many on children
2. 2Debounce expensive ops: Use setTimeout with clear pattern
3. 3Always clean up in disconnect(): Clear timeouts, observers, listeners
4. 4Use IntersectionObserver: For visibility-based behavior

What it can do on your machine

Read from SKILL.md and the folder at commit 0ef5e5d. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • rails

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Stimulus 3.2+, Turbo 8.0+, Importmap

  From compatibility in the SKILL.md frontmatter.

Context cost

Stimulus Patterns loads about 1.2k tokens when it runs, and up to ~4.9k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 330 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~84

When it runs · the whole SKILL.md, loaded when a task matches

~1.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~4.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from dilolabs/nosia at commit 0ef5e5d, republished under its MIT licence (© dilolabs). 330 words, ~1,232 tokens.

name

stimulus-patterns

description

Builds focused, single-purpose Stimulus controllers for progressive enhancement. Use when adding JavaScript behavior, UI interactions, form enhancements, or building reusable client-side components. WHEN NOT: For Turbo Stream/Frame patterns (see turbo-patterns skill). For server-side view logic (see rules/views.md).

compatibility

Stimulus 3.2+, Turbo 8.0+, Importmap

license

MIT

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input", "output"]
  static classes = ["active", "hidden"]
  static values = {
    url: String,
    timeout: { type: Number, default: 5000 }
  }

  connect() { /* Setup */ }
  disconnect() { /* Cleanup -- always clean up! */ }

  actionMethod(event) {
    event.preventDefault()
    this.element.classList.toggle(this.activeClass)
  }

  #privateHelper() { /* Use # prefix */ }
}

<div data-controller="dropdown modal">
  <%# Both controllers active %>
</div>

<div data-controller="sortable">
  <div data-controller="card">
    <div data-controller="dropdown">
      <%# Three controllers in hierarchy %>
    </div>
  </div>
</div>

// Publisher dispatches
this.dispatch("published", { detail: { content: "data" } })

// Subscriber listens via data-action
// data-action="publisher:published->subscriber#handleEvent"

disconnect() {
  clearTimeout(this.timeout)
  this.observer?.disconnect()
  document.removeEventListener("click", this.boundClose)
}

# System tests are the primary way to test Stimulus controllers
test "toggle card details" do
  visit card_path(cards(:logo))
  assert_no_selector ".card__details"
  click_button "Show Details"
  assert_selector ".card__details"
end

© dilolabs, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in .vibe/skills/stimulus-patterns of dilolabs/nosia.

• SKILL.md
• references/controller-catalog.md
• references/stimulus-examples.md

Open the folder on GitHubat commit 0ef5e5d

Used in 1 other repository

We found 3 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in dilolabs/nosia, which our catalogue first saw on October 7, 2026.

• ThibautBaissac/rails_ai_agents.claude_37signals/skills/stimulus-patterns