# Loading Empty Error States

Design the three states every data UI forgets.

- Repository: https://github.com/Archive228/loopkit (756 stars)
- Category: Design
- License: MIT
- Last updated: 2026-07-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Archive228/loopkit --skill loading-empty-error-states -g -a claude-code -y`
Codex: `npx skills add Archive228/loopkit --skill loading-empty-error-states -g -a codex -y`
Cursor: `npx skills add Archive228/loopkit --skill loading-empty-error-states -g -a cursor -y`
Gemini CLI: `npx skills add Archive228/loopkit --skill loading-empty-error-states -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Archive228/loopkit`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as 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.