design-an-empty-state
Design an accurate and useful interface when expected content is absent. Use when first use, no results, completed work, filters, permissions, loading failure, or deleted content could otherwise look identical.
来源信息
- 仓库
- protosphinx/sphinxstack
- 最近来源活动
- 2026年7月29日 13:55
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 3
- Forks
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- design-an-empty-state
- category
- design
- description
- Design an accurate and useful interface when expected content is absent. Use when first use, no results, completed work, filters, permissions, loading failure, or deleted content could otherwise look identical.
# design-an-empty-state
## Procedure
1. Identify the exact cause: new account, no data, no match, restricted access, completion, failure, or deletion.
2. Define what the system knows and must not imply.
3. State the condition in plain language and preserve the page's purpose and orientation.
4. Offer the safest useful next action, alternative, reset, support, or no-action confirmation.
5. Explain prerequisites, permissions, cost, or irreversible consequences before action.
6. Keep search and filtered zero states distinct from an empty collection.
7. Provide accessible headings, focus, links, illustrations, and status announcements.
8. Test each cause, role, language, screen size, and failure path.
## Guardrails
- Do not blame the user or celebrate absence that may reflect loss.
- Never reveal the existence of restricted content.
- Avoid decorative calls to action unrelated to recovery.
## Done
- An empty-state matrix maps each cause to truthful text and action
- Permission, no-result, failure, and first-use cases are verified separately
- Accessibility and recovery checks pass
在 GitHub 查看