关于 hwc-forms-validation
面向使用 Turbo Frames 和 Stimulus 构建表单流程的技能，涵盖常见表单模式、验证响应，以及重新渲染时保留用户上下文。
主要功能
- 01识别常见表单流程
- 02用 Turbo Frames 原位重新渲染
- 03设置验证与成功响应
- 04保留焦点与选区
- 05按需查阅表单参考资料
适用场景
- 01构建行内编辑表单
- 02创建模态框验证流程
- 03实现输入提示搜索
- 04处理 Frame 外部的控件
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hwc-forms-validation确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/2023-11-07-turbo-frames-typeahead-search.md2024-01-16-stimulus-action-parameters.md2024-02-27-turbo-frames-inline-edit.md2024-05-21-turbo-frames-modals-validation.md2025-10-20-turbo-frames-typeahead-validation.md2026-02-03-turbo-frames-external-form.md2026-03-24-turbo-frames-chained-selects.mdINDEX.md详细介绍
表单与验证
使用 Turbo Frames 和 Stimulus 实现以表单为核心的 Hotwire 工作流。
核心工作流
- 确定表单流程：创建/编辑、行内编辑、输入提示、模态表单或外部控件。
- 当验证错误必须在原位置重新渲染时，将表单交互范围包裹在 Turbo Frame 中。
- 验证失败时返回
422，成功重定向时返回303。 - 仅当 Turbo 默认行为不足时，才使用
turbo:submit-end处理提交后的行为。 - 重新渲染时保留用户上下文（焦点/光标/选区）。
防护原则
- 为输入状态保留唯一事实来源；避免在 frame 和非 frame DOM 中重复控件。
- 对于渲染在目标
<form>层级之外的控件，使用 HTMLform属性。 - 避免不经防抖/节流就在每次按键时触发提交逻辑。
- 当表单响应仅更新一个 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/2026-03-24-turbo-frames-chained-selects.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