Loading / Empty / Error States

SkillMedia

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

Available today. Use it from your connected AI after setup.

No other account needed.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Loading / Empty / Error States skill

What this skill tells your AI

The instructions your AI receives, as published by archive228/loopkit in skills/loading-empty-error-states/SKILL.md and read by ahel’s review.

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.

Advanced