# Empty States

> Designing empty states that guide users to take action instead of showing blank screens.

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

---


# Empty States

## Types
1. **First-use:** User hasn't created anything yet. This is onboarding.
2. **No results:** Search or filter returned nothing. Help them adjust.
3. **Cleared:** User deleted everything. Celebrate or guide next action.
4. **Error:** Data failed to load. Explain and offer retry.

## Structure
```
[Optional illustration]
Headline: What belongs here (not "Nothing here")
Body: Why it's valuable to add something (one sentence)
CTA: Single clear action to fix the empty state
```

## Examples

### Bad
"No projects yet."

### Good
"Create your first project. Projects help you organize your work into focused spaces."
[Create Project] button

## Rules
- Every empty state needs a CTA
- The CTA should be the primary action for that area
- Empty states should feel inviting, not broken
- Don't use sad face illustrations (it's not the user's fault)
- Empty states are temporary, design them to be replaced by content