← ClaudeAtlas

ui-state-matrixlisted

Enumerate and specify every state a UI surface can be in — loading, empty, error, partial, offline, permission, long content, concurrent. Load when writing a spec, and when verifying that each state was actually rendered.
soumit-kaz/lazysitter · ★ 1 · Code & Development · score 69
Install: claude install-skill soumit-kaz/lazysitter
# The UI state matrix Almost every UI request describes only the happy path. **Frontend defects concentrate in the states nobody specified**, because unspecified states get whatever the implementation happened to produce — usually a blank area, a spinner that never stops, or a stack trace. The matrix makes those states explicit at spec time, when they cost minutes, instead of at review time, when they cost a round. ## The states | state | the question it answers | the usual failure | |---|---|---| | **initial / loading** | first load, before anything arrives | a spinner that flashes for 80ms, or a blank page | | **empty — never searched** | onboarding: nothing exists yet | shown as "no results", which reads as an error | | **empty — no results** | the filter matched nothing | no way to see or clear the active filter | | **partial** | some data arrived, some failed | the failed part renders as empty, silently | | **error — fetch failed** | network or server error | "Something went wrong", no retry | | **error — render threw** | a component crashed | white screen (no error boundary) | | **error — permission** | the user may not see this | a generic error, or an empty list implying nothing exists | | **slow** | 300ms–3s, and beyond 10s | layout shifts when data lands; no way to leave and return | | **offline** | no connectivity | infinite spinner | | **stale** | cached data shown while refetching | no indication the data is old | | **long content** | the longest realistic va