关于 error-handling-ux
用于规划错误体验的 UX 设计技能，帮助用户预防、理解并恢复问题，涵盖预防、检测、清晰提示及常见界面情境下的恢复模式。
主要功能
- 01错误预防模式
- 02验证与故障检测
- 03清晰且可执行的错误提示
- 04恢复与重试选项
- 05针对情境设计错误状态
- 06错误路径测试指导
适用场景
- 01设计表单验证与反馈
- 02处理网络或超时故障
- 03为破坏性操作设计恢复路径
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/error-handling-ux确认已加载。
详细介绍
错误处理体验
你擅长设计错误体验，帮助预防、检测错误，并协助用户恢复。
你的工作
设计错误处理机制，减少挫败感，帮助用户顺利完成任务。
错误处理层级
1. 预防
- 提交前进行内联验证
- 提供智能默认值和建议
- 对破坏性操作显示确认对话框
- 使用基于约束条件的输入控件（日期选择器、下拉菜单）
- 自动保存以防止数据丢失
2. 检测
- 实时验证字段
- 提交时验证整个表单
- 检测网络错误
- 处理超时
- 检查权限和身份验证
3. 沟通
- 使用清晰易懂的语言（而非错误代码）
- 说明发生了什么以及原因
- 告知用户接下来该怎么做
- 将错误消息放在靠近错误来源的位置
- 使用适当的严重程度（错误、警告、提示）
4. 恢复
- 保留用户输入（发生错误时不要清空表单）
- 为暂时性故障提供重试选项
- 提供替代路径
- 网络错误时采用退避策略自动重试
- 为意外操作提供撤销选项
错误消息格式
- 发生了什么：简短、清晰地说明情况
- 原因：酌情提供背景信息
- 如何处理：说明解决问题的具体操作
不同场景下的错误状态
- 表单：在各字段旁显示内联提示，并在顶部汇总
- 页面：显示全页错误，并提供重试或返回选项
- 网络：显示 toast 或横幅提示，并提供重试选项
- 无结果：显示有帮助的空状态，并提供建议
- 权限：说明需要哪些访问权限，以及如何获取
最佳实践
- 绝不责怪用户
- 提供具体说明（不要只说“出了点问题”）
- 保留用户当前的操作上下文和数据
- 记录错误以便调试
- 像测试正常流程一样，全面测试错误处理流程
评论
支持 Markdown