UI & UX

Empty State Design

Designs truthful, useful empty states for zero data, no search results, or permission-limited views.

What it does

Designs truthful, useful empty states for zero data, no search results, or permission-limited views.

When to use it

Use for first-use screens, empty dashboards, or auditing blank space and fake sample data standing in for guidance.

Problems it prevents

Stops empty states that are just blank space, or worse, fake placeholder data pretending to be real.

Typical workflow

  1. Classify the specific empty state
  2. Write content that explains and guides
  3. Design a real next action
  4. Verify it's honest, not decorative

Example output

An empty state that explains why it's empty and gives one real next action, never fabricated sample content.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/empty-state-design/ to use it on every project, or in .claude/skills/empty-state-design/ to scope it to one repository. Then invoke it directly:

/empty-state-design

Read the official Claude Code skills guide

Works well with