SKILL-048 SaaS UX and layout patterns Locked skill

Loading / error states

An error state's job is to explain what happened and offer a way forward — never to blame the user or dead-end them.

01

What this skill helps you build

Show progress while data loads and fail gracefully when it doesn't — skeletons, spinners, retry affordances, and blame-free error messaging.

The production takeaway

An error state's job is to explain what happened and offer a way forward — never to blame the user or dead-end them.

02

Inside this skill

The full skill expands these implementation areas with decisions, edge cases, prompts, tests, and framework-specific code.

SaaS UX and layout patterns
What this helps you build

The two states every data driven screen needs but most demos skip: a loading state that tells the user something is happening, and an error state that tells them what went wrong an

🔒
SaaS UX and layout patterns
When to use this

Any time your UI renders data it doesn't have yet, or performs an action that can fail. In a SaaS app that's nearly everywhere: A list or table that fetches from an API on mount A

🔒
SaaS UX and layout patterns
The core idea

Every asynchronous view has at least four states , not one. Treat them as a small state machine and render each explicitly: The mistake is designing only the success state and lett

🔒
03

Unlock the full implementation

Paid access includes the complete skill body, implementation prompt, common mistakes, production checklist, and code examples where this skill includes them.