SKILL-029 SaaS UX and layout patterns Locked skill

Empty states

An empty state is not an error — it's an instruction; tell the user exactly what to do next and give them a button to do it.

01

What this skill helps you build

Turn empty screens into activation moments instead of broken-looking dead ends, with the right message for first-run, no-results, and cleared states.

The production takeaway

An empty state is not an error — it's an instruction; tell the user exactly what to do next and give them a button to do it.

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

A set of empty states that make a screen with no data feel intentional instead of broken. Where a naive UI shows a blank table or a spinner that never resolves, you show a short he

🔒
SaaS UX and layout patterns
When to use this

Reach for a deliberate empty state any time a list, table, board, or detail panel can legitimately render with zero rows. The three situations that matter: First run — a brand new

🔒
SaaS UX and layout patterns
The core idea

An empty state is an instruction with a button , not a blank canvas. The screen has no data, so the UI itself must answer the user's only question: what am I supposed to do here? C

🔒
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.