Loading Empty Error States
Design the three states every data UI forgets.
Install
npx skills add Archive228/loopkit --skill loading-empty-error-states -g -a claude-code -y- Repository
- Archive228/loopkit756
- Category
- Design
- Updated
- 4mo ago
- License
- MIT
- Context cost
- Lightabout 151 tokens
- Runs scripts
- No, instructions only
What it does
Design the three states every data UI forgets. Use for any component that fetches or lists data.
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.
