mcpField
I
implement-hotwire

implement-hotwire

github.com/igmarin开发2839 次安装4 周前更新
代码仓库

关于 implement-hotwire

implement-hotwire 是用于构建 Rails 前端的技能，强调渐进增强。它指导开发者先实现纯 HTML，再按需加入 Turbo 和 Stimulus，并验证无 JavaScript 时的行为。

主要功能

  1. 01以 HTML 为先的渐进增强
  2. 02Turbo Frame 与 Stream 选择
  3. 03Stimulus 分层指导
  4. 04禁用 JavaScript 后验证
  5. 05说明 DOM 与服务器契约

适用场景

  1. 01构建 Rails 页面局部更新
  2. 02添加服务器广播的界面变化
  3. 03实现 Turbo 之外的客户端行为
  4. 04验证无 JavaScript 时的表单与导航

安装

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

$npx skills add https://github.com/igmarin/rails-agent-skills --skill implement-hotwire

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

附带文件EXAMPLES.mdreferences/workflow.md

详细介绍

实现 Hotwire

使用渐进增强，通过 Hotwire 构建现代 Rails 前端。

快速参考

需求Hotwire 选择
在链接/表单后替换页面的某一部分Turbo Frame
广播服务端变更Turbo Stream
超出 Turbo 范围的仅客户端行为Stimulus controller
整页导航普通 Rails 导航，而非 frame

HARD-GATE

ALWAYS start with HTML-only, enhance with Hotwire progressively
NEVER use Turbo Frames for full page navigation
ALWAYS test without JavaScript first

核心流程

  1. 构建纯 HTML — 使用标准 Rails 表单和链接实现功能，不使用 Hotwire。
  2. 识别更新区域 — 将局部更新区域包裹在 turbo_frame_tag 中。验证：确认 <turbo-frame> 以正确的 id 出现在 DOM 中。
  3. 添加 Turbo Frames / Streams — 限定 frame 导航范围，或通过 ActionCable 广播。验证：在 DevTools 的 Network 标签页中确认 frame 请求返回 text/vnd.turbo-stream.html；对于 ActionCable，验证订阅出现在 Action Cable 日志中。
  4. 叠加 Stimulus — 仅在 Turbo 之外需要 JavaScript 行为的地方附加 controller。验证：在浏览器控制台中确认 application.getControllerForElementAndIdentifier(el, 'name') 返回 controller 实例。
  5. 验证降级模式 — 在浏览器 DevTools 中禁用 JavaScript（或使用 Capybara 的 :rack_test 驱动运行 rails test:system），并确认在无 JS 情况下一切保持正常：表单提交、链接导航、重新加载后数据持久化。

代码示例

Turbo Frame
<%= turbo_frame_tag "post_#{@post.id}" do %>
  <h1><%= @post.title %></h1>
  <%= link_to "Edit", edit_post_path(@post) %>
<% end %>
Turbo Stream
<%= turbo_stream.append "posts", partial: "post", locals: { post: @post } %>
Stimulus Controller
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["name"]
  greet() { alert(`Hello ${this.nameTarget.value}!`) }
}

在 app/javascript/controllers/index.js 中注册：

import GreetController from "./greet_controller"
application.register("greet", GreetController)

输出风格

实现 Hotwire 时，你的输出必须包括：

  1. 渐进式基线 — 在增强之前，功能如何以纯 HTML 工作。
  2. 所选原语 — Turbo Frame、Turbo Stream、Stimulus 或其组合，以及原因。
  3. DOM 契约 — frame ID、stream 目标、Stimulus controller 名称、目标、值和动作。
  4. 服务端契约 — controller 响应格式、广播触发条件、partial 名称，以及使用时的 ActionCable channel/日志检查。
  5. 验证 — 来自核心流程第 5 步的降级模式检查清单，加上针对 frame、stream 或 Stimulus 行为的系统/浏览器检查。
  6. 语言 — 除非明确要求其他语言，否则使用英语。

扩展资源（渐进式披露）

仅在需要其特定内容时加载这些文件：

  • EXAMPLES.md — 当你需要 Turbo Frames、Streams 和 Stimulus 模式的完整示例时使用
  • references/workflow.md — 当你需要逐步的 Hotwire 实现工作流和决策树时使用

集成

技能何时链接
write-tests用于系统规格和失败的交互覆盖
apply-stack-conventions用于 Rails + Hotwire + Tailwind 技术栈对齐
code-review在 UI 行为和降级模式验证之后

评论

支持 Markdown