关于 harden
harden 是 ui-craft 中用于生产环境检查的界面加固子技能,面向设计与开发工作。它结合通用覆盖矩阵和界面类型检查,报告风险并修复可安全处理的问题。
主要功能
- 01检查加载、空状态与错误处理
- 02审查部分数据、长文本和国际化
- 03检查离线、权限与首次使用状态
- 04按界面类型检查覆盖项
- 05标记状态并修复可处理问题
适用场景
- 01发布前检查界面韧性与无障碍路径
- 02发现错误状态缺少后续操作的问题
- 03检查权限受限或数据缺失时的呈现
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill harden安装后在 Claude Code 中输入/harden确认已加载。
详细介绍
**背景:**此子技能是更广泛的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能,请先阅读其 SKILL.md,了解 Discovery + Anti-Slop + Craft Test,然后再应用以下特定视角。
加固 $ARGUMENTS 处的 UI,使其达到生产就绪状态。加载 ui-craft 技能。
覆盖矩阵——检查每个关键界面:
- 加载中 — 骨架屏应与最终布局匹配(加载完成时不发生 CLS),并在约 200ms 后显示,以避免快速响应时闪现。只要可以使用骨架屏,就绝不能使用通用的居中加载指示器。
- 空状态 — 应有明确目的:用一句话解释为空的原因,并提供一个清晰的主要操作。插图可选,CTA 必须有。
- 错误 — 应内联显示且可采取操作。“保存失败。请重试 / 复制错误 / 联系支持”——绝不能只说“出了点问题”。应明确说明发生了什么以及下一步该做什么。
- 部分数据 — 缺少指标时使用
—(长破折号),当值确实未知时,绝不能使用N/A、null或0。 - 长内容 — 截断内容时提供
title工具提示,使用text-overflow: ellipsis,并在受限区域使用容器查询。使用 120 个字符的名称进行测试。 - i18n — 不要硬编码字符串;为德语预留约 1.3 倍的文本扩展空间;为 CJK 字符预留更窄的字形空间;考虑方向性图标在 RTL 布局中的翻转。
- 离线 / 慢速 — 使用乐观 UI,并在失败时进行协调;超时后仍应显示骨架屏,并提供“仍在加载……”提示。
- 权限 — 用户无权访问时会发生什么:禁用还是隐藏。禁用时始终说明“原因”(工具提示、内联辅助说明)。
- 零状态 → 首次使用 — 内联提示优于 5 步导览。应在界面内引导,而不是覆盖在界面上方。
与旋钮设置无关——正确性不可调节。无论 CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY 如何设置,都要运行完整矩阵。
然后运行对应界面类型的覆盖检查项。 上述九项是跨界面的通用检查;它们并不了解屏幕的具体类型。确定界面类型(数据表、设置、搜索、详情视图、首次使用、账单、定价、文档页、结账、引导流程、破坏性操作确认、邀请/分享),并提取对应检查项:
- MCP 已连接 → 使用对应界面类型调用
ux_coverage。它会返回该类型的检查项和报告规范。 - 未连接 MCP → 阅读
references/coverage.md中对应的章节。 - 没有匹配的界面类型 → 跳过此步骤,并用一句话说明。覆盖范围有意保持不完整;未列出的界面并不代表失败。
每个检查项都包含:何为已具备、构建时适用的 ui-craft 规则,以及缺少该项会给用户带来什么损失。报告具体影响,而不只是缺失状态——“没有导出功能”是状态,“用户预期屏幕上显示 24 行,实际却收到 10,000 行”才是它重要的原因。
需阅读的参考资料:references/accessibility.md(键盘 + 屏幕阅读器操作路径)、references/copy.md(错误和空状态的文案语气)、references/motion.md 中的 Rendering Performance 部分(骨架屏动效 + 减少动态效果)。
输出:分为两个部分,分别报告,绝不合并。
- 加固矩阵——上述 9 项分别标记为已具备 / 部分具备 / 缺失。
- 覆盖情况——对应界面类型的检查项分别标记为 已具备 / 部分具备 / 缺失 / 不需要 / 未知。标记为
not-needed时必须说明原因;如果无法说明该项为何不适用于此界面,则应标记为缺失。标记为unknown时,说明提供哪些额外输入可以确定结果。
以上任一部分都不得提供分数、计数或百分比。“9 项中有 7 项”会让 not-needed 看起来像失败,也会把加固检查变成打分。覆盖检查绝不设为门槛:它只负责报告,构建仍会发布。
然后编辑代码,修复所有缺失项。打印展示修复内容的 Review Format 表格。最后列出任何无法安全自动修复的“仍有风险”项(需要后端支持、需要设计决策、需要翻译文件)。
下一步:/finalize——发布前检查点(第 3 级)。