---
name: every-state-designed
description: "Applies “Every state is a designed state” as a repeatable product-quality gate. Use during design work when empty, loading, error, success-after — designed before the happy path ships."
---

# Every state is a designed state

Apply this skill during **Design** work. It supports Any stack.

Empty, loading, error, success-after — designed before the happy path ships.

## Instructions

For every screen you design or build, enumerate and implement all five states before polishing the happy path: empty (teach the first action), loading (skeleton that matches final layout — no layout shift), error (plain-language cause + next step + retry), success, and after-success (what the user sees 2 seconds later). A screen missing any state is unfinished. Map the flow before drawing the screen; every dead end needs a way out.

## Detect the problem

- A blank div where data will appear 'later'
- A lone spinner centered in a void
- Error copy written by the framework, not you

## Hold the gate

Do not declare this phase complete until every item passes:

- [ ] Empty state teaches the first action (not a blank div)
- [ ] Loading state matches final layout (skeleton, no jumps)
- [ ] Error state says what happened and what to do next, in human words
- [ ] The state 2 seconds AFTER success is designed (what does the user see now?)
- [ ] Flows are drawn before screens; dead ends have exits

## Verify the result

Kill the network and open every screen — each must still look designed.