ui-state-matrixlisted
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