关于 hwc-ux-feedback
面向 Hotwire 开发者的 UX 技能，指导实现加载、提交活动、进度、乐观更新和页面过渡反馈，并强调缓存恢复与失败场景的验证。
主要功能
- 01应用 Turbo 内置反馈语义
- 02添加乐观更新及状态协调
- 03限定过渡触发的生命周期
- 04检查慢网与缓存恢复行为
适用场景
- 01为表单提交显示活动状态
- 02为 Turbo 页面添加进度反馈
- 03设计可协调的乐观界面更新
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/hwc-ux-feedback确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/2023-04-25-turbo-drive-render-interception.md2023-06-06-turbo-drive-form-activity-indicators.md2023-07-18-turbo-drive-progress-bar.md2024-03-26-optimistic-ui-with-turbo-8-morphs.md2024-08-13-turbo-drive-ulid.md2024-11-19-turbo-drive-swiper-view-transitions.md2026-01-20-turbo-frames-loading-spinner.mdINDEX.md详细介绍
用户体验与反馈
在 Hotwire 中实现跨领域的反馈与感知性能模式。
核心工作流
- 确定反馈需求：加载、提交活动状态、进度报告、乐观更新或转场。
- 优先使用 Turbo 内置语义（
busy、进度条钩子、提交／渲染生命周期事件）。 - 仅在有明确协调策略时添加乐观更新。
- 将转场逻辑限定在明确的生命周期事件和对缓存／预览安全的路径中。
- 在慢速网络、前进／后退缓存恢复和提交失败的情况下验证用户体验行为。
防护措施
- 不要使用固定超时来代替网络或渲染完成状态。
- 在预览和缓存恢复时禁用动画／转场。
- 确保提交锁定与解锁在开始和结束事件之间保持对称。
- 将用户体验反馈逻辑与特定领域的表单／媒体／导航实现分开。
有选择地加载参考资料
仅打开当前请求所需的文件。
- 复用 Turbo 进度条：
references/2023-07-18-turbo-drive-progress-bar.md - 表单活动指示器：
references/2023-06-06-turbo-drive-form-activity-indicators.md - 渲染拦截与页面转场：
references/2023-04-25-turbo-drive-render-interception.md - 类似 Swiper 的转场行为：
references/2024-11-19-turbo-drive-swiper-view-transitions.md - Frame 加载指示器模式：
references/2026-01-20-turbo-frames-loading-spinner.md - 使用 Turbo 变形协调的乐观 UI：
references/2024-03-26-optimistic-ui-with-turbo-8-morphs.md - 基于 ULID 的乐观身份标识策略：
references/2024-08-13-turbo-drive-ulid.md
完整目录请参阅 references/INDEX.md。
升级至相邻技能
- 表单验证和提交正确性相关问题：使用
hwc-forms-validation - 导航／历史记录／缓存流程相关问题：使用
hwc-navigation-content - 实时推送更新和流操作相关问题：使用
hwc-realtime-streaming - 媒体专属播放／上传相关问题：使用
hwc-media-content - Stimulus API／控制器基础相关问题：使用
hwc-stimulus-fundamentals
评论
支持 Markdown