Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill design-empty-statesThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Showing SKILL.md
Based on SOC occupation classification
| name | design-empty-states |
| description | Create helpful, actionable zero-content states |
| domain | ui-design |
| skill-type | generative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | ["05-design-button-hierarchy"] |
Create helpful, actionable empty/zero states that guide users forward instead of leaving them at a dead end.
Generative + Evaluative
Transforms blank screens into onboarding/guidance moments with context, explanation, and clear next steps.
Illustration/Icon (optional but helpful)
Headline
Description
Primary Action
Secondary Info (optional)
| Type | Context | Approach |
|---|---|---|
| First-time | New user, no content | Onboarding, education, clear CTA |
| User-cleared | User deleted everything | Confirmation, undo option, re-add CTA |
| No results | Search/filter returned nothing | Adjust filters, clear search, try different terms |
| No access | Permission restrictions | Explain why, how to request access |
| Error state | Failed to load | Retry action, support contact |
| Failure | Description | Fix |
|---|---|---|
| The Void | Blank white space | Add context, illustration, CTA |
| Error as Empty | "404" or "Null" message | Distinguish error states from empty states |
| No Way Forward | Message but no action | Always provide primary CTA |
| Generic Illustration | Unrelated cute character | Use relevant icon or context illustration |
| Negative Framing | "You have no friends" | Positive framing: "Connect with people" |
| Too Much Info | Paragraphs of text | Keep to 1-2 sentences + CTA |
design-button-hierarchy (needs clear primary action)apply-typography-scale (headline + body hierarchy)Input: Dashboard showing "No data available" in small gray text, no other content
Evaluation: FAIL
Recommendation: