harden-pro 是一个界面韧性技能,定位为界面稳定性的守护者。与专注理想路径的设计技能不同,它面向真实生产环境,处理错误、国际化(文本扩展与 RTL)、响应式文本溢出和网络容错。
用途与主要能力:通过韧性协议覆盖多类边界场景,包括极端输入测试(超长/超短文本、特殊字符、海量数据)、错误场景审计(网络失败、API 超时、校验错误)、i18n 校验(德语等文本扩展、RTL 与逻辑属性)、空状态设计(每个功能都有教学型空状态)以及面向用户输入的清洗与校验。
强制标准:文本韧性方面禁止对文本容器使用固定宽高,灵活项用 min-width: 0 防溢出,多行截断用 line-clamp,长串用 hyphens: auto;逻辑属性方面避免用 left/right/width/height 设内外边距,改用 margin-inline、padding-block、inset-inline-start 以自动支持阿拉伯语、希伯来语等 RTL;优雅错误状态方面禁止笼统的“发生错误”,每个错误须说明发生了什么、提供可操作恢复(重试/返回)并使用友好语气。
使用方式:技能给出可复用的实现模式,示例用 React 19 展示加载骨架屏、带 role=alert 的错误提示与重试按钮、空状态插画与引导文案,以及列表项的 min-w-0 break-words。还列出反模式:不要假设英文长度、应测试 +30% 扩展;不要忽略网络超时;不要缺少操作反馈;不要在未考虑溢出时使用绝对定位;不要仅信任客户端数据。
适用场景:需要在多语言、弱网、异常数据下保持稳定的前端界面与组件。
限制:资料仅给出原则与示例,未提供安装命令、版本兼容矩阵、平台范围、收费信息或实测效果数据,这些暂未提供。