# Empty States

> Design effective empty states that orient users, set expectations, and guide them toward the first meaningful action. Use when creating first-use experiences, zero-data screens, cleared views, or error-driven empty conditions.

- Skill: `itsual/empty-states` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itsual/empty-states`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itsual/empty-states/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: itsual (https://skillmd.com/u/itsual)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/itsual/empty-states

---


# Empty States

## Overview

Empty states are product moments, not blanks. They appear on first use, after clearing data, or when searches return nothing — and they strongly shape activation and confidence.

## When to Use

- First-run and zero-data screens
- No-results and filtered-empty views
- Permission-denied or setup-required states
- Error states that leave a screen empty

## Core Practices

- Explain why the screen is empty
- Offer a clear primary action to move forward
- Use illustration or visuals sparingly and purposefully
- Differentiate first-use empty from “you cleared everything” empty
- Avoid dead ends

## Principles

- Empty states are onboarding opportunities
- Be helpful, not cutesy at the expense of clarity
- Match tone to the user’s likely emotional state
- Design empty states as intentionally as populated ones

## Verification

- [ ] User knows what to do next
- [ ] Primary action is obvious
- [ ] Different empty reasons are handled differently when needed