thehotwireclub avatar

Hwc Stimulus Fundamentals

This is your Stimulus controller workhorse when you're focused on the framework itself rather than a specific domain like forms or navigation. It walks you through lifecycle hooks, value callbacks, targets, outlets, action parameters, and keyboard event filters with enough guardrails to keep controllers composable and idempotent across connect/disconnect cycles. The references cover practical patterns like MutationObserver sorting, Web Share API integration, and target callback orchestration. It's opinionated about declarative action parameters over manual dataset parsing and knows when to escalate to neighbor skills for form validation, Turbo navigation, or real-time streaming concerns. If you're building a non-trivial Stimulus controller and need the API details at hand, this is the one to reach for.

skills.sh installs
254
GitHub stars
153
last updated
Aug 21, 2026

Install

$ npx -y skills add thehotwireclub/hotwire_club-skills --skill hwc-stimulus-fundamentals --agent claude-code

Installs into .claude/skills of the current project.

Files

Stimulus Fundamentals

Implement robust Stimulus controllers with clear lifecycle and state boundaries.

Core Workflow

  1. Define controller contract first: targets, values, outlets, actions, and expected lifecycle.
  2. Keep state transitions in value callbacks when reactive updates are required.
  3. Guard callbacks that can run before connect() completes.
  4. Use connect()/disconnect() for setup and teardown symmetry.
  5. Isolate DOM event handling from business rules; keep controllers composable.

Guardrails

  • Prefer declarative action parameters over manual dataset parsing.
  • Use outlets for controller-to-controller communication instead of private internals.
  • Keep target callbacks idempotent; account for repeated connect/disconnect cycles.
  • Use MutationObserver only when DOM-driven reactivity is required.
  • Feature-detect browser APIs before exposing UI affordances.

Load References Selectively

Open only the file needed for the current request.

Sponsors

Details

Repository
github.com/thehotwireclub/hotwire_club-skills
Categories
Frontend Development, Backend & APIs, Code Review & Quality, Design & UI/UX
First seen
Jun 3, 2026

More from thehotwireclub/hotwire_club-skills

All 6
1julianobarbosa avatarmarkitdown-skilljulianobarbosa/claude-code-skillsGuide for using Microsoft MarkItDown - a Python utility for converting files to Markdown. Use when converting PDF, Word, PowerPoint, Excel, images, audio, HTML,252skills.sh installs
2davila7 avatarcore-componentsdavila7/claude-code-templatesCore component library and design system patterns. Use when building UI, using design tokens, or working with the component library.249skills.sh installs
3dchuk avatarintegrating-tauri-rust-frontendsdchuk/claude-code-tauri-skillsGuides the user through integrating Rust-based WASM frontend frameworks with Tauri v2, covering Leptos and Trunk setup, WASM compilation configuration, Cargo.to248skills.sh installs
4thedivergentai avatargodot-platform-mobilethedivergentai/gd-agentic-skillsExpert blueprint for mobile platforms (Android/iOS) covering touch controls, virtual joysticks, responsive UI, safe areas (notches), battery optimization, and a248skills.sh installs
5nocobase avatarnocobase-dsl-reconcilernocobase/skills**Opt-in DSL path** for NocoBase app building. Use ONLY when the user explicitly asks for YAML / DSL / committed-to-git / `cli push` / spec files — e.g. "use th244skills.sh installs
6nexu-io avatarmagazine-web-pptnexu-io/open-design生成"电子杂志 × 电子墨水"风格的横向翻页网页 PPT(单 HTML 文件),含 WebGL 流体背景、衬线标题 + 非衬线正文、章节幕封、数据大字报、图片网格等模板。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT,或提到"杂志风 PPT"、"horizontal swipe deck"、"editori239skills.sh installs