mcpField
H
hwc-stimulus-fundamentals

hwc-stimulus-fundamentals

github.com/thehotwireclub开发152253 次安装3 周前更新
代码仓库

关于 hwc-stimulus-fundamentals

面向 Hotwire 开发者的技能，指导构建生命周期与状态边界清晰的 Stimulus 控制器，并提供实践规范和按需查阅的参考资料。

主要功能

  1. 01定义控制器契约
  2. 02用值回调管理响应式状态
  3. 03规范设置与清理流程
  4. 04通过 outlets 协调控制器
  5. 05按需查阅 Stimulus 资料

适用场景

  1. 01设计新的 Stimulus 控制器
  2. 02处理反复连接与断开
  3. 03协调多个控制器的行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/thehotwireclub/hotwire_club-skills --skill hwc-stimulus-fundamentals

安装后在 Claude Code 中输入/hwc-stimulus-fundamentals确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
2023-08-29-stimulus-value-changed-callbacks.md
2023-10-24-stimulus-keyboardevent-101.md
2023-12-05-stimulus-auto-sorting.md
2023-12-19-stimulus-outlets-api.md
2024-05-07-stimulus-target-callbacks.md
2024-06-18-fundamentals-core-web-vitals.md
2025-11-25-stimulus-web-share-api.md
2026-07-22-stimulus-promise-returning-outlet-methods.md
INDEX.md

详细介绍

Stimulus 基础

实现健壮的 Stimulus 控制器，并明确划分生命周期和状态边界。

核心工作流

  1. 先定义控制器契约：目标、值、插槽、动作和预期生命周期。
  2. 需要响应式更新时，将状态转换放在值回调中。
  3. 对可能在 connect() 完成前运行的回调进行保护。
  4. 使用 connect()/disconnect() 实现对称的设置和清理。
  5. 将 DOM 事件处理与业务规则隔离；确保控制器可组合。

注意事项

  • 优先使用声明式动作参数，而不是手动解析 dataset。
  • 使用插槽进行控制器间通信，而不是访问私有内部实现。
  • 确保目标回调幂等；妥善处理重复的 connect/disconnect 周期。
  • 仅在需要由 DOM 驱动响应式行为时使用 MutationObserver。
  • 在提供 UI 功能前，先检测浏览器 API 是否可用。

按需加载参考资料

仅打开当前请求所需的文件。

  • 值变更回调：references/2023-08-29-stimulus-value-changed-callbacks.md
  • 键盘动作筛选器和快捷键：references/2023-10-24-stimulus-keyboardevent-101.md
  • 基于 MutationObserver 的排序：references/2023-12-05-stimulus-auto-sorting.md
  • 插槽 API 通信：references/2023-12-19-stimulus-outlets-api.md
  • 目标回调编排：references/2024-05-07-stimulus-target-callbacks.md
  • Web Share API 集成：references/2025-11-25-stimulus-web-share-api.md
  • Core Web Vitals 和延迟加载基础：references/2024-06-18-fundamentals-core-web-vitals.md
  • 返回 Promise 的插槽方法（可等待的控制器 API）：references/2026-07-22-stimulus-promise-returning-outlet-methods.md

完整目录请使用 references/INDEX.md。

转交给相关技能

  • 以表单为中心的行为：使用 hwc-forms-validation
  • 使用 Turbo 进行导航、历史记录和缓存：使用 hwc-navigation-content
  • Turbo Stream/WebSocket 编排：使用 hwc-realtime-streaming
  • 媒体集成和播放相关问题：使用 hwc-media-content
  • UX 反馈、过渡和进度相关问题：使用 hwc-ux-feedback

评论

支持 Markdown