Unhappy

educlopez/ui-craft/.gemini/skills/unhappy

作者 educlopezceecc8e1fb0c2befda73da996435900d6dd0c1ac無授權條款375 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫5 週前更新

State-first design pass — inventories and implements all non-happy states (loading, empty, error, partial, conflict, offline) before the happy path, and refactors impossible boolean state to proper state machines. Use when starting a new screen, reviewing an existing one for edge-case gaps, or when the user says "handle the error state" / "add loading states" / "what happens when data is missing". Invoke when the user asks for unhappy on their UI, or mentions 'unhappy' alongside design / UI / frontend work.

AI 產生的概覽

在正常路徑之前先盤點並實作所有非正常 UI 狀態的設計流程。

功能
此技能引導對 UI 目標進行狀態優先的設計:盤點每個資料來源與互動介面,將各狀態(閒置、載入、空、錯誤、部分、衝突、離線)標記為已設計、缺少或不適用,然後補齊缺口。它也會審查正常路徑中未檢查資源是否存在的假設,並將不可能出現的布林狀態重構為狀態機或 reducer,同時為可能離線的操作加入樂觀 UI 與重新連線後的对账。產出是直接修改程式碼,並附上 Before/After/Why 審查表,每新增一個狀態一列。
適用情境
適用於開始新畫面、審查現有畫面的邊界情況缺口,或被要求處理錯誤狀態、加入載入狀態、決定資料缺少時的行為時。它面向需要設計與實作非正常狀態的 UI 與前端工作。
執行需求
僅含指令,不附帶指令碼。它需要以參數形式提供 UI 目標,並引用更廣泛的 ui-craft 技能中的配套檔案(references/state-design.md、references/loops.md、SKILL.md),以及一個 CRAFT_LEVEL 設定,未知時預設為 7。
<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

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:

Surfaceidleloadingemptyerrorpartialconflictoffline

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_LEVELRequired states to stub
≤ 4idle, loading, error
5-7idle, loading, empty, error, success
8+all six — add partial, conflict, offline

If 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:

BeforeAfterWhy
no loading state on <ProjectList>skeleton rows matching final layout, 200ms delayprevents "is it broken?" perception; avoids CLS
generic "Error" toastinline error with specific cause + retry + support IDrecoverability (heuristic 9)

One row per state added. No full diffs.

Next step: /harden — implement the states you just designed (rung 1).

來源與署名

來源:educlopez/ui-craft位於.gemini/skills/unhappy提交ceecc8e

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架