loading-empty-error-states
Design the three states every data UI forgets. Use for any component that fetches or lists data.
来源信息
- 仓库
- Archive228/loopkit
- 最近来源活动
- 2026年6月29日 22:25
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 757
- Forks
- 124
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- loading-empty-error-states
- description
- Design the three states every data UI forgets. Use for any component that fetches or lists data.
- when_to_use
- a list, a fetch, a dashboard, anything async in the UI
# Loading / Empty / Error States
AI-built UIs handle the happy path and crash on the other three. Design all four:
- **Loading** — skeletons that match the final layout (not a centered spinner that shifts everything).
- **Empty** — a real first-run state: what it is, and the one action to fill it. Not a blank box.
- **Error** — what failed, in human terms, plus a retry. Never a raw stack trace or silent nothing.
- **Partial** — slow/streaming data, optimistic updates that can roll back.
For each fetch in the diff, confirm all four exist. The empty and error states are where products feel broken.
在 GitHub 查看