Empty States: AI Skill for UX Design

Empty States is an AI skill that turns blank screens into guidance: it explains why the screen is empty and offers the next step. No more dead-end "No tasks found" moments.

npx skills add Uxcel-Lab/product-skills --skill ux-empty-states

Copied

What this skill does

Helps an AI assistant design empty states that explain what happened and guide the next action instead of dead-ending users.

Establishes why the screen is empty: first use, cleared, no results, or error.
Writes copy that says why the screen is empty and what to do next.
Pairs each message with one specific, action-oriented CTA.
Turns first-use screens into onboarding's last mile.
Treats no-results pages as recovery moments with tips and suggestions.
Routes 404 visitors back to safety with plain words and links onward.
Keeps screens calm: minimal visuals, one primary action, no tutorial walls.

When to use it

Use it when you need an AI assistant to:

design a first-use or zero-data screen;
write copy for a cleared inbox or done list;
build a no-results page that offers recovery routes;
design a 404 page that guides users onward;
pick the CTA for an empty cart or dashboard;
decide whether sample data belongs on a first-run screen;
review empty states for tone and clarity.

Decisions this skill helps you make

Decision	Options
Illustration	Relevant, on-brand visuals that carry meaning, subordinate to the message
Humor	Warmth always; jokes only in low-frustration moments like cleared states
Second CTA	One primary action; a genuine alternative stays visually secondary
Educational content	Links in the copy for complex products, not a competing button
Sample data	Clearly labeled previews when showing value beats describing it
404 aids	Plain explanation plus at least two routes onward, such as homepage and search