Empty state design
Skill Dragoon0x/everything-design-taste/skills/empty-state-design
Empty state patterns, zero data states, first-run states, error states, and no-results states.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill empty-state-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.4 KB, 294 tokens by cl100k_base, as published. Nobody here has run it
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."
Templates
First-run: [Illustration optional] + "No [items] yet" + "Create your first [item]" [Button] No results: "No results for '[query]'" + "Try a different search term" + [Clear Search] Error: "Couldn't load [items]" + "Check your connection and try again" + [Retry Button]
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.