Design the states between screens

---
name: frontend-states
description: "Cover loading, empty, error, success, and permission states before shipping a UI."
license: CC0-1.0
metadata:
  author: "SI Editorial"
  version: "1"
---

# Design the states between screens

## When to use
Cover loading, empty, error, success, and permission states before shipping a UI.

## Workflow
1. Identify the primary action and data dependencies.
2. Describe initial, loading, populated, empty, partial-error, offline, and permission-denied states.
3. Keep entered data on recoverable errors and avoid duplicate submissions.
4. Specify accessible feedback and responsive behavior.

## Boundaries
Use only tools and data authorized for the task. Ask for missing requirements when they affect the result. Report what you verified and what you could not verify.

## Try it
Design the state model for connecting an AI agent.

## Success looks like
A complete state table with transitions and recovery actions.