UX Baseline Check

Core Pack — Always Active

This is a core skill. Apply it on ALL visual and frontend work alongside design-review.

Every screen ships with ALL states covered. No exceptions. This is the minimum bar.

The State Inventory

Before any page or component is "done", verify each applicable state exists:

1. Data States

• Empty — no data yet. Helpful message + clear CTA, not a blank screen
• Loading — skeleton, spinner, or shimmer. Never a white flash
• Loaded — the happy path, obviously
• Error — API failure, network issue. User-friendly message + retry action
• Partial — some data loaded, some failed. Don't hide what works
• Long content — what happens with 200 items? 2000-character names? Test it