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에서 보기