Design the three states every data UI forgets. Use for any component that fetches or lists data.
Installation
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
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
targets
["*"]
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.
