Skill LibraryPrompt Skill1 DesignsTop Views

Empty State Action Recovery

Design cause, copy, recovery actions, and frontend state contracts for first-use, no-results, filtered-empty, permission, configuration, failure, offline, and completed-empty states.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Interaction

Skill Directive

Description

Design cause, copy, recovery actions, and frontend state contracts for first-use, no-results, filtered-empty, permission, configuration, failure, offline, and completed-empty states.

TagsInteraction

Skill Prompt

- Inputs must include surface type, primary task, empty reason, user permission, current query/filter/loading/error state, available actions, copy tone, target viewports, and data source/error code.
- Separate loading, empty, and error first: never show no-results before a request completes; when content may exist but cannot be shown, classify it as permission/configuration/source/backend/offline instead of ordinary no-data.
- Classify the state as first-use/no data, creation empty, search empty, filtered empty, permission empty, configuration required, source/backend failure, offline/index not ready, or complete/cleared.
- For each class, output title, body, primary action, secondary action, and optional detail; the title states the condition, the body explains cause and normal content, and actions resolve the current cause.
- Search empty states reflect the query and suggest adjusting or clearing it; filtered empty states show active filters and reset; permission empty states name the access needed plus request/admin/home routes.
- Choose visual treatment by density: tables/cards/widgets use compact text and a small icon; first-use pages may use modest illustration or sample content; error and permission states should avoid playful art that trivializes the task.
- Frontend implementation must define a reason enum, action schema, details fields, and rendering condition; empty states appear only after completed states such as `status === 'success' && items.length === 0`.
- Accessibility requirements: place the empty state in the original content region, avoid meaningless empty table headers/pagination, use polite announcements after search/filter, and reserve `role='alert'` for urgent errors.
- Deliver classification, cause, copy block, visual treatment, state model, render condition, ARIA/live-region notes, and desktop/mobile QA checklist.
- Sources referenced: Carbon Empty states, Atlassian empty-state writing, Material empty states, NN/g complex-application empty-state guidance, and PatternFly no-results/configuration/no-access/backend-failure variants. The content is rewritten as Interface Lab skill guidance.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Empty State Action Recovery

More pages using Empty State Action Recovery