add-empty-error-states

Implementing empty and error UI states involves locating data-fetch entry points like useQuery or route loaders and ensuring they render human-readable messages with retry options when requests fail or return zero results. This skill audits those fetch surfaces to enforce consistent UX guardrails across the render site.

Your list page looks broken because it lacks an explicit empty state UI for when data loads successfully but returns nothing. This skill identifies data-driven views missing dedicated empty and error rendering branches and implements them using existing UI primitives to prevent broken-looking interfaces.

The best way to add retry to error states in shadcn UI is to reuse existing EmptyState or ErrorState primitives and implement retry affordances for safe failures. This skill prioritizes your project's existing UI components to maintain visual consistency while adding retry functionality.

This approach works with both route loaders and TanStack Query hooks like useQuery and useSuspenseQuery. The skill enumerates every fetch surface within your route or component to verify that loading, empty, and error branches are all reachable and correctly rendered.

To avoid showing raw error messages in React data views, render user-friendly copy for production while surfacing raw error details only in development. This skill implements correct UX guardrails by ensuring error states display human-readable messages instead of exposing technical error traces.

You should not use a shared empty state primitive if your project lacks one and needs a highly customized design. This skill prefers reusing existing shadcn-style EmptyState components but proposes the smallest consistent fallback UI when a primitive is missing.