empty-state-design
Installation
SKILL.md
Empty State Design
Types of Empty States
| Type | When | Goal |
|---|---|---|
| First-run | User hasn't created anything yet | Guide to first action |
| No results | Search/filter returned nothing | Help refine or broaden |
| Cleared | User deleted/completed everything | Celebrate or suggest next |
| Error | Data failed to load | Explain and offer retry |
| Permission | User doesn't have access | Explain why, offer path |
Design Rules
- Be specific. "No projects" is okay. "No projects yet. Create your first one." is better.
- Include a CTA. Always give the user something to do.
- Match the page context. An empty state on a dashboard looks different from a settings page.
- Skip decoration. A helpful message + CTA is better than a cute illustration + vague text.
- Don't blame the user. "You haven't created any projects" → "No projects yet."