# Loading Empty Error States

> Design the three states every data UI forgets. Use for any component that fetches or lists data.

- Skill: `archive228/loading-empty-error-states` (Agent Skill)
- Install (CLI): `npx skillmds@latest add archive228/loading-empty-error-states`
- Raw SKILL.md: https://api.skillmd.com/api/skills/archive228/loading-empty-error-states/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: archive228 (https://skillmd.com/u/archive228)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/archive228/loading-empty-error-states

---

# 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.