mcpField
H
hwc-forms-validation

hwc-forms-validation

github.com/lucianghinda开发42537 次安装今天更新
代码仓库

关于 hwc-forms-validation

面向 Hotwire 开发者的表单与验证技能，涵盖 Turbo Frames 和 Stimulus 表单流程。它提供错误重绘、提交响应及保留用户输入上下文的实践指引。

主要功能

  1. 01规划常见表单交互流程
  2. 02用 Turbo Frame 原位呈现验证错误
  3. 03区分验证失败与成功响应
  4. 04保留焦点和光标位置
  5. 05避免重复输入状态

适用场景

  1. 01实现行内编辑和模态表单
  2. 02构建带验证的类型搜索
  3. 03处理帧外部的表单控件

安装

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

$npx skills add https://github.com/lucianghinda/superpowers-ruby --skill hwc-forms-validation

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

包含的文件

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

references/
2023-11-07-turbo-frames-typeahead-search.md
2024-01-16-stimulus-action-parameters.md
2024-02-27-turbo-frames-inline-edit.md
2024-05-21-turbo-frames-modals-validation.md
2025-10-20-turbo-frames-typeahead-validation.md
2026-02-03-turbo-frames-external-form.md
INDEX.md

详细介绍

表单与验证

使用 Turbo Frames 和 Stimulus 实现以表单为核心的 Hotwire 工作流。

核心工作流

  1. 确定表单流程：创建/编辑、内联编辑、类型提示、模态表单或外部控件。
  2. 如果验证错误需要在原处重新渲染，请用 Turbo Frame 包裹表单交互范围。
  3. 验证失败时返回 422，成功重定向时返回 303。
  4. 仅当 Turbo 默认行为不够用时，才使用 turbo:submit-end 处理提交后的行为。
  5. 重新渲染时保留用户上下文（焦点/光标位置/选区）。

注意事项

  • 为输入状态保留唯一事实来源；避免在 Frame 和非 Frame DOM 中重复放置控件。
  • 对于渲染在目标 <form> 层级之外的控件，请使用 HTML form 属性。
  • 避免在每次击键时触发提交逻辑，除非已进行防抖/节流处理。
  • 当表单响应仅更新一个 Frame 时，明确指定提交后的行为。

有选择地加载参考资料

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

  • 内联编辑：references/2024-02-27-turbo-frames-inline-edit.md
  • 模态验证流程：references/2024-05-21-turbo-frames-modals-validation.md
  • 类型提示搜索：references/2023-11-07-turbo-frames-typeahead-search.md
  • 带焦点处理的类型提示验证：references/2025-10-20-turbo-frames-typeahead-validation.md
  • Frame 中的外部表单控件：references/2026-02-03-turbo-frames-external-form.md
  • 表单的 Stimulus action 参数：references/2024-01-16-stimulus-action-parameters.md

完整目录请参阅 references/INDEX.md。

转交给相邻技能

  • 导航/历史记录/缓存行为：使用 hwc-navigation-content
  • WebSocket 或 Turbo Stream 推送更新：使用 hwc-realtime-streaming
  • 媒体上传/播放行为：使用 hwc-media-content
  • 通用 UX 润色（加载指示器/进度/过渡效果）：使用 hwc-ux-feedback
  • 一般 Stimulus API 设计问题：使用 hwc-stimulus-fundamentals

评论

支持 Markdown