unhappy

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.

Design every non-happy state for the UI at

$ARGUMENTS

. Load the

ui-craft

skill and read

references/state-design.md

Step 1 — Inventory. List every data source and interactive surface in the target. For each, enumerate its states:

Surface	idle	loading	empty	error	partial	conflict	offline

Mark each cell as designed (exists in code), missing (must add), or N/A (not applicable — e.g., a read-only view has no conflict state).

Step 2 — Fill the missing states. For each missing state, either stub it inline or add a follow-up task comment. Use

references/state-design.md

for:

Skeleton sizing (match final layout, 200ms delay, 5s upper bound)
Empty-state copy (why empty + next action + visual)
Error-state contract (specific cause + one-click recovery + support ID)
Offline handling (queue writes + reconcile on reconnect)

Step 3 — Audit the happy path. Flag every spot where the happy path assumes resource presence without checking. Fix with early-returns, state guards, or discriminated-union state handling. Booleans like

isLoading && !error && data

that allow impossible states are findings — refactor to a proper state machine or reducer.

Step 4 — Optimistic UI + reconciliation. For offline-likely actions (saves, sends, edits, toggles), implement optimistic UI with reconciliation on reconnect. Queue writes locally. Surface any rejected writes — never swallow them.

Knob gating (CRAFT_LEVEL):

CRAFT_LEVEL	Required states to stub
≤ 4	idle, loading, error
5-7	idle, loading, empty, error, success
8+	all six — add partial, conflict, offline

CRAFT_LEVEL

is unknown, default to 7.

Convergence note: To iterate until all required states are present, load

skills/ui-craft/references/loops.md

and run preset

state-coverage

(budget = the default loop budget defined in loops.md): after stubbing the highest-priority missing required state, re-inventory until all knob-required states are present or budget exhausted. Emit the pre-flight cost notice before iteration 1.

Output: edit the code directly. After each file, print the Review Format table from SKILL.md:

Before	After	Why
no loading state on `<ProjectList>`	skeleton rows matching final layout, 200ms delay	prevents "is it broken?" perception; avoids CLS
generic "Error" toast	inline error with specific cause + retry + support ID	recoverability (heuristic 9)

One row per state added. No full diffs.

Next step:

/harden

— implement the states you just designed (rung 1).

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

ui-craft

技能的一个细分视角。如果已安装

ui-craft

技能，请先阅读其SKILL.md中的Discovery + Anti-Slop + Craft Test部分，再应用以下具体流程。

为

$ARGUMENTS

对应的UI设计所有非成功状态。加载

ui-craft

技能并阅读

references/state-design.md

。

步骤1 — 状态梳理 列出目标页面中的所有数据源和交互界面。为每个界面枚举其所有状态：

Surface	idle	loading	empty	error	partial	conflict	offline

标记每个单元格为已设计（代码中已存在）、缺失（需要添加）或不适用（例如，只读视图不存在冲突状态）。

步骤2 — 补全缺失状态 针对每个缺失的状态，要么在代码中添加占位实现，要么添加后续任务注释。可参考

references/state-design.md

获取以下内容：

骨架屏尺寸（匹配最终布局，200ms延迟，最长5s）
空状态文案（说明空状态原因 + 下一步操作 + 视觉元素）
错误状态规范（明确原因 + 一键恢复 + 支持ID）
离线处理（队列化写入 + 重连后同步）

步骤3 — 检查正常流程 标记所有正常流程中未做检查就假设资源存在的位置。通过提前返回、状态守卫或区分联合状态处理来修复。像

isLoading && !error && data

这类会导致不合理状态的布尔表达式需要整改——重构为合适的state machine或reducer。

步骤4 — 乐观UI与同步 针对可能离线的操作（保存、发送、编辑、切换），实现乐观UI并在重连时进行同步。将写入操作本地队列化。显示所有被拒绝的写入——绝不能隐藏它们。

等级控制（CRAFT_LEVEL）：

CRAFT_LEVEL	需要占位实现的状态
≤ 4	idle, loading, error
5-7	idle, loading, empty, error, success
8+	全部六种——添加partial, conflict, offline

如果CRAFT_LEVEL未知，默认设为7。

迭代说明： 如需迭代直至所有要求的状态都已实现，请加载

skills/ui-craft/references/loops.md

并运行预设的

state-coverage

（预算=loops.md中定义的默认循环预算）：在占位实现最高优先级的缺失要求状态后，重新梳理状态，直至所有等级要求的状态都已实现或预算耗尽。在第一次迭代前发出预执行成本通知。

输出要求： 直接编辑代码。每个文件编辑完成后，打印SKILL.md中的评审格式表格：

修改前	修改后	原因
`<ProjectList>` 无加载状态	匹配最终布局的骨架行，200ms延迟	避免用户产生「是否已崩溃」的疑问；防止CLS
通用的「Error」提示框	内联错误提示，包含明确原因 + 重试按钮 + 支持ID	提升可恢复性（启发式规则9）

每个添加的状态对应一行。无需完整差异对比。

下一步：

/harden

— 实现你刚刚设计的状态（第一阶段）。