stimulus-coder

Use when creating or refactoring Stimulus controllers. Applies Hotwire conventions, controller design patterns, targets/values usage, action handling, and JavaScript best practices.

Aller à l'installation

Dépôt: majesticlabs-dev/majestic-marketplace
Dernière activité de la source: 14 mars 2026 à 02:16
Langue détectée de SKILL.md: anglais
Étoiles: 47
Forks: 11

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.

npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill stimulus-coder

La commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.

Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Explorateur de fichiers

3 fichiers

SKILL.md

Instructions source · Aperçu en lecture seule

Retour à la recherche Retour à l’installation

frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.

2026-05-13

skill-structure

Skill file structure, naming conventions, directory layout, frontmatter requirements, and invocation control. Use when creating skill files or slash commands to ensure correct format and validation.

2026-05-13

devils-advocate

Forces adversarial reasoning before committing to decisions. Triggers on architectural choices, approach selection, and planning phases to prevent premature commitment bias.

2026-05-08

Tout voir dans ce dépôt

export default class extends Controller {
  static values = {
    delay: { type: Number, default: 300 },
    event: { type: String, default: "input" }
  }

  connect() {
    this.element.addEventListener(this.eventValue, this.submit.bind(this))
  }

  submit() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => this.element.requestSubmit(), this.delayValue)
  }
}

<%= form_with data: { controller: "auto-submit", auto_submit_delay_value: 500 } %>

<div data-controller="toggle clipboard" data-toggle-open-value="false">
  <button data-action="toggle#toggle">Show</button>
  <div data-toggle-target="content" class="hidden">
    <code data-clipboard-target="source">secret-code</code>
    <button data-action="clipboard#copy">Copy</button>
  </div>
</div>

export default class extends Controller {
  static targets = ["tab", "panel"]
  static values = { index: { type: Number, default: 0 } }

  select(event) { this.indexValue = this.tabTargets.indexOf(event.currentTarget) }

  indexValueChanged() {
    this.panelTargets.forEach((panel, i) => panel.classList.toggle("hidden", i !== this.indexValue))
    this.tabTargets.forEach((tab, i) => tab.setAttribute("aria-selected", i === this.indexValue))
  }
}

<button data-action="click->toggle#toggle">Toggle</button>
<input data-action="input->search#update focus->search#expand">
<button data-action="modal#open" data-modal-id-param="confirm-dialog">Open</button>
<input data-action="keydown.enter->form#submit keydown.escape->form#cancel">

open(event) {
  const modalId = event.params.id
  document.getElementById(modalId)?.showModal()
}

export default class extends Controller {
  static targets = ["menu"]
  static values = { open: Boolean }

  toggle() { this.openValue = !this.openValue }

  close(event) {
    if (!this.element.contains(event.target)) this.openValue = false
  }

  openValueChanged() {
    this.menuTarget.classList.toggle("hidden", !this.openValue)
    if (this.openValue) document.addEventListener("click", this.close.bind(this), { once: true })
  }
}

export default class extends Controller {
  static targets = ["source", "button"]
  static values = { successMessage: { type: String, default: "Copied!" } }

  async copy() {
    const text = this.sourceTarget.value || this.sourceTarget.textContent
    await navigator.clipboard.writeText(text)
    this.showSuccess()
  }

  showSuccess() {
    const original = this.buttonTarget.textContent
    this.buttonTarget.textContent = this.successMessageValue
    setTimeout(() => this.buttonTarget.textContent = original, 2000)
  }
}

export default class extends Controller {
  connect() {
    document.addEventListener("turbo:before-visit", this.dismiss.bind(this))
    this.timeout = setTimeout(() => this.dismiss(), 5000)
  }

  disconnect() { clearTimeout(this.timeout) }
  dismiss() { this.element.remove() }
}

// Bad: hardcoded
export default class extends Controller {
  toggle() { this.element.classList.toggle("hidden") }
}

// Good: configurable
export default class extends Controller {
  static classes = ["toggle"]
  toggle() { this.element.classList.toggle(this.toggleClass) }
}

// Mixin pattern
const Sortable = (controller) => {
  const original = controller.prototype.connect
  controller.prototype.connect = function() {
    if (original) original.call(this)
    this.sortable = new Sortable(this.element, this.sortableOptions)
  }
}

// Read arbitrary data-chart-* attributes
get chartOptions() {
  return Object.entries(this.element.dataset)
    .filter(([key]) => key.startsWith("chart"))
    .reduce((opts, [key, val]) => {
      opts[key.replace("chart", "").toLowerCase()] = val
      return opts
    }, {})
}

Pattern	Coupling	Direction	Use When
Custom events	Loose	Broadcast (1→many)	Sender doesn't know receivers
Outlets	Structured	Direct (1→1, 1→few)	Known relationships in layout
Callbacks	Read-only	Request/response	Sharing state without triggering actions

// Sender
this.dispatch("submitted", { detail: { id: this.idValue }, bubbles: true })

// Receiver (in HTML)
// data-action="sender:submitted->receiver#handleSubmit"

export default class extends Controller {
  static outlets = ["result"]

  search() {
    const results = this.performSearch()
    this.resultOutlets.forEach(outlet => outlet.update(results))
  }

  resultOutletConnected(outlet) { /* setup */ }
  resultOutletDisconnected(outlet) { /* cleanup */ }
}

// Good: plugin init in connect
connect() {
  this.chart = new Chart(this.canvasTarget, this.chartConfig)
}

disconnect() {
  this.chart.destroy()
  this.chart = null
}

connect() {
  document.addEventListener("turbo:before-cache", this.teardown.bind(this))
  this.slider = new Swiper(this.element, this.config)
}

teardown() {
  this.slider?.destroy()
  // Restore original DOM state before caching
}

disconnect() {
  this.teardown()
}

connect() {
  this.boundResize = this.resize.bind(this)
  window.addEventListener("resize", this.boundResize, { passive: true })
}

disconnect() {
  window.removeEventListener("resize", this.boundResize)
}

<%# Good: Stimulus manages lifecycle %>
<div data-controller="search"
     data-action="resize@window->search#layout keydown.escape@window->search#close">

<%# Bad: manual addEventListener in connect() %>

import { Controller } from "@hotwired/stimulus"

export default class ApplicationController extends Controller {
  handleError(error, context = {}) {
    console.error(`[${this.identifier}]`, error, context)
    // Sentry.captureException(error, { extra: context })
  }
}

import ApplicationController from "./application_controller"

export default class extends ApplicationController {
  async save() {
    try {
      await this.persist()
    } catch (error) {
      this.handleError(error, { action: "save", id: this.idValue })
    }
  }
}

Anti-Pattern	Problem	Solution
Creating DOM extensively	Fighting Stimulus philosophy	Let server render HTML
Storing state in JS	State lost on navigation	Use Values in HTML
Over-specific controllers	Not reusable	Design generic behaviors
Manual querySelector	Fragile, bypasses Stimulus	Use targets
Inline event handlers	Unmaintainable	Use data-action
Overloading connect()	Bloated, mixes concerns	Values for state, data-action for events
Tight controller coupling	Fragile, hard to test	Custom events or outlets
Missing disconnect cleanup	Memory leaks, duplicate listeners	Always pair connect/disconnect
Unbound event references	Can't removeEventListener	Store `.bind()` result

name	stimulus-coder
description	Use when creating or refactoring Stimulus controllers. Applies Hotwire conventions, controller design patterns, targets/values usage, action handling, and JavaScript best practices.
allowed-tools	Read Write Edit Grep Glob Bash

name	stimulus-coder
description	Use when creating or refactoring Stimulus controllers. Applies Hotwire conventions, controller design patterns, targets/values usage, action handling, and JavaScript best practices.
allowed-tools	Read Write Edit Grep Glob Bash

stimulus-coder

Options d'installation

Vérifiez les fichiers source

Stimulus Coder

Core Concepts

Controller Design Principles

Keep Controllers Small and Reusable

Stimulus Coder

Core Concepts

Controller Design Principles

Keep Controllers Small and Reusable

Use Data Attributes for Configuration

Compose Multiple Controllers

Targets and Values

Targets for Element References

Action Handling

Action Parameters

Common Controller Patterns

Dropdown Controller

Clipboard Controller

Turbo Integration

Architecture Patterns

Make Controllers Configurable

Mixins Over Deep Inheritance

Targetless Controllers

Namespaced Attributes

Controller Communication

Custom Events (Preferred Default)

Outlets (Structured Relationships)

Lifecycle Best Practices

Don't Overuse `connect()`

Always Pair connect/disconnect

Turbo Cache Teardown

Event Listener Hygiene

Store Bound References

Prefer Declarative Actions

Application Controller

Anti-Patterns

Output Format

stimulus-coder

Informations de source

Options d'installation

Vérifiez les fichiers source

Plus depuis ce dépôt

Stimulus Coder

Core Concepts

Controller Design Principles

Keep Controllers Small and Reusable

Plus depuis ce dépôt

Stimulus Coder

Core Concepts

Controller Design Principles

Keep Controllers Small and Reusable

Use Data Attributes for Configuration

Compose Multiple Controllers

Targets and Values

Targets for Element References

Action Handling

Action Parameters

Common Controller Patterns

Dropdown Controller

Clipboard Controller

Turbo Integration

Architecture Patterns

Make Controllers Configurable

Mixins Over Deep Inheritance

Targetless Controllers

Namespaced Attributes

Controller Communication

Custom Events (Preferred Default)

Outlets (Structured Relationships)

Lifecycle Best Practices

Don't Overuse connect()

Always Pair connect/disconnect

Turbo Cache Teardown

Event Listener Hygiene

Store Bound References

Prefer Declarative Actions

Application Controller

Anti-Patterns

Output Format

Don't Overuse `connect()`