원클릭으로
loading-empty-error-states
Design the three states every data UI forgets. Use for any component that fetches or lists data.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Design the three states every data UI forgets. Use for any component that fetches or lists data.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | loading-empty-error-states |
| description | Design the three states every data UI forgets. Use for any component that fetches or lists data. |
| when_to_use | a list, a fetch, a dashboard, anything async in the UI |
AI-built UIs handle the happy path and crash on the other three. Design all four:
Review a diff against the goal spec assuming the code is BROKEN. The reviewer that lives in the maker's head always agrees with itself — this pulls review into a hostile, separate pass. Invoke after every code change before marking work done.
Verify that an endpoint checks ownership, not just authentication. Use on any handler that reads or mutates user data.
Find the exact commit that introduced a bug. Use when something worked before and broke, and you don't know which change did it.
Turn a set of commits or a diff into a clean, user-facing changelog entry. Use before a release or PR description.
Turn messy WIP into clean, atomic commits with messages that explain why. Use before opening a PR.
Keep the agent's context lean so accuracy doesn't collapse. Use on long sessions, big files, or when the agent starts hallucinating.