mcpField
S
stimulus

stimulus

github.com/faqndo97开发33129 次安装37 周前更新
代码仓库

关于 stimulus

stimulus 是帮助开发者构建和维护 Stimulus 控制器的技能，适用于使用 JavaScript 为现有 HTML 添加交互的项目。它提供按任务选择的工作流，涵盖新建、调试、功能扩展和 Turbo 集成。

主要功能

  1. 01基于 HTML 数据属性连接行为
  2. 02遵循控制器命名约定
  3. 03处理控制器生命周期与清理
  4. 04通过作用域和 outlets 隔离交互
  5. 05提供开发与维护工作流

适用场景

  1. 01从头创建 Stimulus 控制器
  2. 02排查控制器连接或动作问题
  3. 03为现有控制器添加功能
  4. 04实现 UI 模式或集成 Turbo

安装

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

$npx skills add https://github.com/faqndo97/ai-skills --skill stimulus

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

包含的文件

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

references/
actions.md
anti-patterns.md
architecture.md
classes.md
outlets.md
performance.md
stimulus-use.md
targets.md
testing-debugging.md
turbo-integration.md
ui-patterns.md
values.md
workflows/
add-feature.md
build-new-controller.md
debug-controller.md
handle-forms.md
implement-ui-pattern.md
integrate-turbo.md
optimize-performance.md
review-controller.md

详细介绍

<essential_principles>

Stimulus 的工作方式

Stimulus 是一个轻量级 JavaScript 框架，通过数据属性将 JavaScript 行为连接到 HTML。它不会渲染 HTML，而是为现有 HTML 增添交互功能。

1. HTML 优先理念

状态存储在 DOM 中，而非 JavaScript 中。页面切换期间，控制器可以被丢弃，并从缓存的 HTML 重新初始化。设计控制器时，应从数据属性读取状态，并在重新连接时恢复自身。

2. 约定优于配置

Stimulus 使用可预测的命名约定：

  • 控制器：data-controller="clipboard"
  • 目标：data-clipboard-target="source"
  • 动作：data-action="click->clipboard#copy"
  • 值：data-clipboard-url-value="/api/copy"
  • 类：data-clipboard-supported-class="visible"
  • Outlet：data-clipboard-result-outlet="#result"
3. 了解生命周期

控制器有三个生命周期回调：

  • initialize() - 控制器实例化时调用一次
  • connect() - 控制器连接到 DOM 时调用（使用 Turbo 时可能多次调用）
  • disconnect() - 控制器从 DOM 中移除时调用

在 disconnect() 中，始终清理在 connect() 中设置的内容（计时器、事件监听器、观察器）。

4. 作用域隔离

每个控制器只能看到其作用域内的元素（带有 data-controller 的元素及其后代）。目标必须位于作用域内。使用 Outlet 在控制器边界之间通信。

5. 渐进增强

首先构建不使用 JavaScript 也能正常工作的 HTML。使用 Stimulus 增强功能，而非替代功能。使用功能前，检查 API 是否受支持：

connect() {
  if ("clipboard" in navigator) {
    this.element.classList.add(this.supportedClass)
  }
}

</essential_principles>

**你想做什么？**
  1. 构建一个新控制器
  2. 调试现有控制器
  3. 为控制器添加功能
  4. 检查控制器是否符合最佳实践
  5. 优化性能
  6. 实现 UI 模式（模态框、下拉菜单、标签页等）
  7. 与 Turbo 集成
  8. 处理表单
  9. 其他

继续之前请等待回复。

| 回复 | 工作流 | |----------|----------| | 1、"new"、"create"、"build"、"start" | `workflows/build-new-controller.md` | | 2、"broken"、"fix"、"debug"、"crash"、"bug"、"not working" | `workflows/debug-controller.md` | | 3、"add"、"feature"、"extend"、"modify" | `workflows/add-feature.md` | | 4、"review"、"audit"、"check"、"best practices"、"patterns" | `workflows/review-controller.md` | | 5、"slow"、"optimize"、"performance"、"fast"、"memory" | `workflows/optimize-performance.md` | | 6、"modal"、"dropdown"、"tabs"、"accordion"、"toggle"、"UI"、"pattern" | `workflows/implement-ui-pattern.md` | | 7、"turbo"、"frames"、"streams"、"hotwire" | `workflows/integrate-turbo.md` | | 8、"form"、"validation"、"submit"、"input" | `workflows/handle-forms.md` | | 9、其他 | 澄清需求，然后选择工作流或参考资料 |

阅读工作流后，请严格遵循其中的步骤。

<verification_loop>

每次更改后

  1. 是否已连接？ 检查浏览器控制台中的 Stimulus 连接消息
  2. 目标是否已解析？ 验证 this.hasXxxTarget 是否返回 true
  3. 动作是否触发？ 在动作方法中临时添加 console.log
  4. 是否已清理？ 离开页面再返回——确认没有错误或内存泄漏
// Debug mode - add to application.js
application.debug = true

向用户报告：

  • "Controller connects: ✓"
  • "Targets found: X of Y"
  • "Actions working: ✓/✗"
  • "Ready for testing" </verification_loop>

<reference_index>

领域知识

所有资料均位于 references/：

核心 API： architecture.md、targets.md、values.md、actions.md、outlets.md、classes.md 生态系统： stimulus-use.md、ui-patterns.md 集成： turbo-integration.md 质量： testing-debugging.md、performance.md、anti-patterns.md </reference_index>

<workflows_index>

工作流

全部位于 workflows/ 中：

文件用途
build-new-controller.md从头创建新的控制器
debug-controller.md查找并修复错误
add-feature.md为现有控制器添加功能
review-controller.md审核控制器是否符合最佳实践
optimize-performance.md分析性能并提升速度
implement-ui-pattern.md构建模态框、下拉菜单、标签页等
integrate-turbo.md使用 Turbo Frames/Streams
handle-forms.md表单验证与提交
</workflows_index>

评论

支持 Markdown