mcpField
H
harden

harden

github.com/educlopez设计与 UI407564 次安装1 周前更新
代码仓库

关于 harden

harden 是 ui-craft 中用于生产环境检查的界面加固子技能,面向设计与开发工作。它结合通用覆盖矩阵和界面类型检查,报告风险并修复可安全处理的问题。

主要功能

  1. 01检查加载、空状态与错误处理
  2. 02审查部分数据、长文本和国际化
  3. 03检查离线、权限与首次使用状态
  4. 04按界面类型检查覆盖项
  5. 05标记状态并修复可处理问题

适用场景

  1. 01发布前检查界面韧性与无障碍路径
  2. 02发现错误状态缺少后续操作的问题
  3. 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 技能。

覆盖矩阵——检查每个关键界面:

  1. 加载中 — 骨架屏应与最终布局匹配(加载完成时不发生 CLS),并在约 200ms 后显示,以避免快速响应时闪现。只要可以使用骨架屏,就绝不能使用通用的居中加载指示器。
  2. 空状态 — 应有明确目的:用一句话解释为空的原因,并提供一个清晰的主要操作。插图可选,CTA 必须有。
  3. 错误 — 应内联显示且可采取操作。“保存失败。请重试 / 复制错误 / 联系支持”——绝不能只说“出了点问题”。应明确说明发生了什么以及下一步该做什么。
  4. 部分数据 — 缺少指标时使用 —(长破折号),当值确实未知时,绝不能使用 N/A、null 或 0。
  5. 长内容 — 截断内容时提供 title 工具提示,使用 text-overflow: ellipsis,并在受限区域使用容器查询。使用 120 个字符的名称进行测试。
  6. i18n — 不要硬编码字符串;为德语预留约 1.3 倍的文本扩展空间;为 CJK 字符预留更窄的字形空间;考虑方向性图标在 RTL 布局中的翻转。
  7. 离线 / 慢速 — 使用乐观 UI,并在失败时进行协调;超时后仍应显示骨架屏,并提供“仍在加载……”提示。
  8. 权限 — 用户无权访问时会发生什么:禁用还是隐藏。禁用时始终说明“原因”(工具提示、内联辅助说明)。
  9. 零状态 → 首次使用 — 内联提示优于 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 部分(骨架屏动效 + 减少动态效果)。

输出:分为两个部分,分别报告,绝不合并。

  1. 加固矩阵——上述 9 项分别标记为已具备 / 部分具备 / 缺失。
  2. 覆盖情况——对应界面类型的检查项分别标记为 已具备 / 部分具备 / 缺失 / 不需要 / 未知。标记为 not-needed 时必须说明原因;如果无法说明该项为何不适用于此界面,则应标记为缺失。标记为 unknown 时,说明提供哪些额外输入可以确定结果。

以上任一部分都不得提供分数、计数或百分比。“9 项中有 7 项”会让 not-needed 看起来像失败,也会把加固检查变成打分。覆盖检查绝不设为门槛:它只负责报告,构建仍会发布。

然后编辑代码,修复所有缺失项。打印展示修复内容的 Review Format 表格。最后列出任何无法安全自动修复的“仍有风险”项(需要后端支持、需要设计决策、需要翻译文件)。

下一步:/finalize——发布前检查点(第 3 级)。

评论

支持 Markdown