loading-empty-error-states
Design the three states every data UI forgets. Use for any component that fetches or lists data.
Informations de source
- Dépôt
- Archive228/loopkit
- Dernière activité de la source
- 29 juin 2026 à 22:25
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 757
- Forks
- 124
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Affichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- loading-empty-error-states
- description
- 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
# 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.
Voir sur GitHub