pbakaus/harden

harden 是做什么的？

将界面打造成生产级品质：错误处理、空状态、引导流程、国际化、文本溢出和边缘情况管理。当用户要求加固、做成生产级、处理边缘情况、添加错误状态、设计空状态、改进引导流程或修复溢出和国际化问题时使用。

概述

harden 技能为你的应用增加了必要的弹性和用户友好的回退机制。它帮助识别并实现生产级界面所需的关键关注点，而不仅仅是核心功能路径。

核心关注领域

1. 错误处理

• 实现全面的错误边界（Error Boundaries）。
• 为网络请求处理添加 retry（重试）、fallback（回退）和 graceful degradation（优雅降级）机制。
• 验证表单输入并提供清晰的错误消息。
• 为 API 错误提供用户可读的消息，不要暴露技术细节。

2. 空状态

• 为列表、搜索结果和仪表盘设计信息性的空状态。
• 包含清晰的说明、下一步操作提示和视觉元素（图标/插画）。
• 避免仅显示“暂无数据”文字；提供上下文指导。

3. 用户引导流程

• 为新用户设计分步式初始设置向导。
• 实现 Tooltip 引导或功能亮点显示模式。
• 创建操作演示或示例数据，帮助快速理解用法。

4. 国际化（i18n）

• 围绕 i18n 库（如 react-i18next、vue-i18n 等）标准化字符串提取。
• 优雅地处理从右到左（RTL）的语言排版。
• 确保日期、数字和货币属性正确本地化。

5. 文本溢出

• 使用 CSS 属性如 text-overflow: ellipsis 处理长文本截断。
• 对动态卡片、表格和数据列表应用响应式文本样式。
• 实现悬停时的 Tooltip 展示全文。

6. 边缘情况处理

• 处理极端输入（非常长或非常短的字符串、特殊字符）。
• 处理并发操作（重复点击、快速表单提交）。
• 处理权限不足或功能受限的情况。

如何使用

当用户要求以下内容时，请系统性地评估并应用此技能：

• “让这个页面更健壮。”
• “处理这里所有可能的错误。”
• “如果列表为空时应该显示什么？”
• “为新手添加引导流程。”
• “添加多语言支持。”
• “修复这个文本溢出的问题。”

支持平台

• Web 应用（React、Vue、Angular、Svelte 等）
• 移动原生应用（iOS、Android）
• 桌面应用（Electron）
• 通用 UI 模式

最佳实践

• 始终提供可访问的回退方案（ARIA 属性、alt 文本）。
• 使用渐进增强原则：基础功能始终可用。
• 记录所做的决策：为什么选择某个错误策略，如何配置 i18n。
• 测试边界情况：同时测试正常流程、错误流程和边缘情况。