关于 hwc-stimulus-fundamentals
用于构建生命周期和状态边界清晰的 Stimulus 控制器的技能，帮助开发者定义控制器契约、管理回调与通信，并保持 DOM 处理的可组合性。
主要功能
- 01定义 targets、values、outlets 和 actions
- 02管理生命周期的设置与清理
- 03处理响应式 value 回调
- 04通过 outlets 实现控制器通信
- 05将 DOM 事件与业务规则分离
适用场景
- 01设计 Stimulus 控制器契约
- 02处理重复连接与断开周期
- 03协调控制器间通信
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hwc-stimulus-fundamentals确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/2023-08-29-stimulus-value-changed-callbacks.md2023-10-24-stimulus-keyboardevent-101.md2023-12-05-stimulus-auto-sorting.md2023-12-19-stimulus-outlets-api.md2024-05-07-stimulus-target-callbacks.md2024-06-18-fundamentals-core-web-vitals.md2025-11-25-stimulus-web-share-api.mdINDEX.md详细介绍
Stimulus 基础
实现健壮的 Stimulus 控制器，明确生命周期和状态边界。
核心工作流
- 先定义控制器契约：目标、值、outlet、操作以及预期生命周期。
- 需要响应式更新时，将状态转换放在值回调中。
- 对可能在
connect()完成前运行的回调进行保护。 - 使用
connect()/disconnect()保持设置与清理的对称性。 - 将 DOM 事件处理与业务规则隔离；保持控制器可组合。
防护原则
- 优先使用声明式操作参数，而不是手动解析 dataset。
- 使用 outlet 实现控制器间通信，而不是访问私有内部实现。
- 保持目标回调幂等；考虑重复的连接／断开周期。
- 仅在需要由 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 - Outlets 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
完整目录见 references/INDEX.md。
转交给相关技能
- 以表单为中心的行为：使用
hwc-forms-validation - 使用 Turbo 的导航／历史记录／缓存：使用
hwc-navigation-content - Turbo Stream／WebSocket 编排：使用
hwc-realtime-streaming - 媒体集成和播放相关问题：使用
hwc-media-content - UX 反馈／过渡／进度相关问题：使用
hwc-ux-feedback
评论
支持 Markdown