harden

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Harden the UI at

$ARGUMENTS

for production. Load the

ui-craft

skill.

Coverage matrix — check every key surface:

Loading — skeletons match the final layout (no CLS on resolve), shown after ~200ms to avoid flash on fast responses. Never a generic centered spinner when a skeleton is possible.
Empty — purposeful: one line explaining why it's empty + one clear primary action. Illustration optional, CTA mandatory.
Error — inline, actionable. "Save failed. Try again / Copy error / Contact support" — never just "Something went wrong." Surface the what and the next step.
Partial data —
```
—
```
(em dash) for missing metrics, never
```
N/A
```
or
```
null
```
or
```
0
```
when the value is truly unknown.
Long content — truncation with
```
title
```
tooltip,
```
text-overflow: ellipsis
```
, container queries for constrained regions. Test with a 120-character name.
i18n — no hardcoded strings, ~1.3× text expansion slack for German, narrower glyphs for CJK, RTL flip consideration for icons with direction.
Offline / slow — optimistic UI with reconciliation on failure; skeleton persists past timeout with a "still loading…" affordance.
Permission — what happens when the user lacks access: disabled vs hidden. Always surface a "why" (tooltip, inline helper) when disabled.
Zero-state → first-run — inline hints beat 5-step tours. Guide within the surface, not over it.

Knob-agnostic — correctness is not tunable. Run the full matrix regardless of CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY.

References to read:

references/accessibility.md

(keyboard + screen reader paths),

references/copy.md

(error and empty-state voice),

references/motion.md

Rendering Performance section (skeleton motion + reduced-motion).

Output: a per-surface checklist marking each of the 9 items as present / missing / partial. Then edit the code to fix what's missing. Print the Review Format table showing fixes. End with a "still at risk" list for anything you couldn't safely auto-fix (requires backend, requires design decision, requires translation files).

Next step:

/finalize

— the pre-ship gate (rung 3).

背景说明： 该子技能是更广泛的

ui-craft

技能的一个分支。如果已安装

ui-craft

技能，请先阅读其SKILL.md文档了解发现环节、防冗余机制和工艺测试，再应用以下具体准则。

为生产环境加固

$ARGUMENTS

指定的UI。加载

ui-craft

技能。

覆盖矩阵——检查所有关键界面：

加载状态 — 骨架屏与最终布局匹配（加载完成时无CLS），约200ms后显示，避免快速响应时出现闪烁。只要可使用骨架屏，就绝不使用通用的居中spinner。
空状态 — 明确清晰：用一行文字说明为空原因 + 一个明确的主要操作按钮。插图可选，CTA必填。
错误状态 — 内联显示且可操作。例如「保存失败。重试 / 复制错误信息 / 联系支持」——绝不能只显示「出了点问题」。要明确告知用户问题是什么以及下一步该怎么做。
部分数据 — 缺失指标用
```
—
```
（破折号）表示，当值确实未知时，绝不使用
```
N/A
```
、
```
null
```
或
```
0
```
。
长内容 — 使用
```
title
```
工具提示进行截断，配合
```
text-overflow: ellipsis
```
样式，针对受限区域使用容器查询。用120字符长度的名称进行测试。
国际化（i18n） — 禁止硬编码字符串，为德语预留约1.3倍的文本扩展空间，为中日韩文字使用更窄的字形，考虑带方向的图标在RTL布局下的翻转。
离线/慢速网络 — 采用乐观UI，失败时进行状态调和；骨架屏在超时后持续显示，并提供「仍在加载…」提示。
权限控制 — 用户无访问权限时的处理：禁用还是隐藏。当元素被禁用时，必须明确说明原因（通过工具提示或内联帮助文本）。
零状态→首次运行 — 内联提示优于五步引导教程。在界面内提供引导，而非覆盖在界面之上。

参数无关性 — 正确性不可调。无论CRAFT_LEVEL / MOTION_INTENSITY / VISUAL_DENSITY设置如何，都要运行完整的检查矩阵。

参考文档：

references/accessibility.md

（键盘+屏幕阅读器路径）、

references/copy.md

（错误和空状态文案风格）、

references/motion.md

中的渲染性能章节（骨架屏动画+减少动画）。

输出结果： 针对每个界面生成检查清单，标记9项内容的状态为已存在/缺失/部分完成。然后编辑代码修复缺失项。输出包含修复内容的审查格式表格。最后列出无法安全自动修复的「仍存在风险」事项（如需要后端支持、需要设计决策、需要翻译文件）。

下一步：

/finalize

— 上线前的验收关卡（第3阶段）。