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
- フォーク
- 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で見る