loading-empty-error-states
Design the three states every data UI forgets. Use for any component that fetches or lists data.
Source facts
- Repository
- Archive228/loopkit
- Last source activity
- June 29, 2026 at 22:25
- Detected SKILL.md language
- English
- Stars
- 757
- Forks
- 124
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- 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.
View on GitHub