I haven't looked at any code. The state table below comes from your description (happy path with ten rows only), so "Built?" is no wherever you said only the happy path exists. It is unknown for things a happy-path build may still cover by accident, like hover and focus.
State table: Invoices table
| State | Applies? | What the user sees | What they can do | Copy | Built? |
|---|---|---|---|---|---|
| Initial / idle | Yes (search box, before any query) | Full list with empty search | Type, filter | Placeholder: "Search by invoice number or customer" | Yes |
| First load | Yes | Skeleton rows matching the 10-row layout, with a ~200 ms delay before showing | Wait; filters and search disabled or queued | None, or a visually hidden "Loading invoices" | No |
| Refreshing (search, filter or page change with data shown) | Yes | Old rows dimmed, with a thin progress bar. Height stays fixed | Keep typing; cancel by changing the query | None | No |
| Loading more / page change | Yes | Pager shows a busy state on the clicked control; rows are replaced or dimmed | Click another page | None | No |
| Empty: first use | Yes | Illustration and message, no filters or pager | Primary action (create an invoice, or none if invoices are system-generated) | "No invoices yet. They'll appear here after your first billing cycle." | No |
| Empty: no results | Yes | Message that echoes the search and filters in use | "Clear search", "Clear filters" | "No invoices match "acme" with Status: Overdue." | No |
| Empty: no access | Yes | See permission denied | No | ||
| Success: 1, a few, many | Yes | 1 row, a partial last page, thousands of total results | Normal use | Correct plural: "1 invoice", "2,431 invoices" | Partly (only 10 rows) |
| Partial | Yes (list loaded but a row's PDF link or customer name failed) | Row shown with a "—" or inline warning | Retry that part | "Customer name unavailable" | No |
| Stale | Yes (a new invoice or payment status arrives elsewhere) | "Last updated" time, with an optional "Refresh" prompt | Refresh, keeping search, filters and page | "Updated 12 min ago. Refresh" | No |
| Recoverable error (list fetch fails or times out) | Yes | Error panel in the table body. Search and filter values are kept; old rows stay if present | Retry | "We couldn't load your invoices. Check your connection and try again." | No |
| Error on a later page or filter change | Yes | Previous rows kept, with an inline banner | Retry; go back | "Couldn't load page 3. Try again." | No |
| Validation error | Partly (date-range filter with from > to, amount min > max, search too long) | Inline message beside the field. The invalid value stays | Fix the value | "End date must be after start date." | No |
| Permission denied | Yes (401, 403) | 401 sends the user to sign in. 403 shows a "not allowed" panel | Sign in; request access | "You don't have access to invoices for this account. Ask an admin to grant access." | No |
| Not found | Partly (page beyond the last after a filter change, or a stale deep link) | Reset to page 1 with a notice | Go back to page 1 | "That page no longer exists. Showing page 1." | No |
| Offline | Yes | Banner. Cached rows stay, with a stale mark | Retry on reconnect; PDF button disabled | "You're offline. Showing the last loaded invoices." | No |
| Rate limited / maintenance (429, 503) | Yes | Panel with a retry-after time | Wait and retry | "Too many requests. Try again in 30 seconds." | No |
| Unexpected failure | Yes | Generic fallback panel with a reference ID | Retry, go back, contact support | "Something went wrong on our side. Reference: abc123." | No |
| Conflict | Mostly no (read-only list). Applies if the PDF is regenerated or the invoice is voided while the user is viewing it | Notice | Refresh | "This invoice was updated. Refresh to see the latest." | No |
| Default / hover / focus / pressed | Yes | Visible focus ring on search, filters, pager, row buttons | Keyboard use | n/a | Unknown |
| Selected / current | Yes (current page, active filters) | aria-current="page" on the page number. Filter chips for active filters |
Remove a filter chip | "Status: Overdue ✕" | Unknown |
| Disabled | Yes (Prev on page 1, Next on the last page, PDF when unavailable) | Greyed control with a tooltip or adjacent text saying why | Read the reason | "PDF not ready yet", "Available once the invoice is issued" | No |
| In progress: Download PDF | Yes | Per-row spinner, with only that row's button disabled | Continue using the rest of the table | "Preparing PDF…" | No |
| Success feedback: download | Yes | Browser download, plus a toast if it is slow or opens in a new tab | Dismiss | "Invoice INV-1042 downloaded." (announced via a polite live region) | No |
| Download failure | Yes | Row-level error, and a toast | Retry on that row | "Couldn't download INV-1042. Try again." | No |
| Destructive | No (read-only, nothing to delete) | n/a | n/a | n/a | n/a |
| Zero, one, many | Yes | See Success | Partly | ||
| Very long text | Yes (customer name, invoice reference) | Truncated with ellipsis and a tooltip or title for the full text. No horizontal page overflow | Hover or focus for the full text | n/a | No |
| Missing fields | Yes (no due date, null amount, no customer) | "—" in the cell, never "null" or "undefined" | No | ||
| Unusual data | Yes | Currency formatting by locale, negative amounts for credit notes, large totals, time zones, non-Latin names, RTL | "–$120.00 (credit)" | Unknown | |
| Different sizes | Yes | On narrow screens, a card layout or a horizontal scroll with a sticky first column. Zoomed text still works | Unknown | ||
| Returning with saved state | Yes | Search, filters and page persisted in the URL | Share and restore; clear all | "Clear all filters" | No |
| Concurrency | Yes | Race: a slower earlier response overwrites a newer one. Handle with abort or request IDs | No | ||
| Interruption (session expiry mid-use) | Yes | Re-auth prompt that keeps the query | Sign in again | "Your session expired. Sign in to continue." | No |
| Motion and display prefs | Yes | Skeleton shimmer respects reduced motion. Dark mode and high contrast contrast ratios | Unknown |
Prioritised list of what is missing
P0: blocks the task or shows wrong data
- Error states (list fetch, page change, 401/403, 429/503, unexpected). Right now a failed request probably leaves a blank or stuck table. Add one table-body error component with plain-language copy, retry, and a reference code. Keep the old rows and the user's search and filter values.
- Empty states, split by cause. "No invoices yet" and "No results for these filters" need different messages. The no-results state needs "Clear search" and "Clear filters".
- Download PDF failure and in-progress states. Disable only the clicked row's button, show a spinner, handle failure with a retry, and handle a missing or not-yet-generated PDF with a disabled button and an explanation. This is the one action on the page that matters.
- Request race conditions. Debounce search (~300 ms), cancel in-flight requests when the query changes, and ignore stale responses. Otherwise the results shown can fail to match the search box.
- Pagination boundaries. Disable Prev on the first page and Next on the last. Reset to page 1 when the search or filter changes. Handle a page that no longer exists after the data shrinks.
P1: significant UX and trust
6. Loading states. A skeleton on first load and a dimmed "refreshing" state on later loads. Keep the table height stable, and delay the indicator by ~200 ms so fast responses don't flash it.
7. Offline detection. Show a banner, keep the cached rows, and disable PDF downloads with a reason.
8. Filter validation. Inline errors for an inverted date range or amount range, with the entered values kept.
9. Disabled controls with reasons. No unexplained greyed-out buttons.
10. Content extremes. Truncate long names with a full-text alternative, show "—" for null fields, handle credit notes and negative amounts, and format currency and dates by locale and time zone.
11. Persist the query in the URL. Search, filters, and page should survive reload and be shareable, with a visible "Clear all".
P2: polish and robustness
12. Partial failures (a row's data or PDF link missing) with per-row retry.
13. Stale-data indicator ("Updated 12 min ago" and a Refresh action that keeps the user's place).
14. Session expiry mid-use that keeps the query and returns the user to it after sign-in.
15. Accessibility: a visible focus ring, aria-current on the current page, and a live region announcing result counts ("24 invoices found") and download success. Give each row's button a unique name ("Download PDF for INV-1042"), not just "Download PDF".
16. Responsive layout, reduced motion, dark mode and high contrast.
How to verify
Force each state on purpose, using DevTools throttling and offline mode plus a mock API. Return an empty array, 401, 403, 429, 500 and a timeout, a 100-character customer name, a null due date, and a response that arrives out of order. For each one, check the visual result, the keyboard path out, and what a screen reader announces.
If you can share the component code, I can mark the "Built?" column from the code instead of from your description.
Real run in an isolated folder with only this skill installed. Only the Skill and Read tools were enabled, so no command was run and no file was written. The scenario is fictional and the model had no access to the code. The build status in the table comes from the description, not from code.
하는 일
UI 버그의 대부분은 아무도 설계하지 않은 상태에 있습니다. 이 스킬은 한 번에 하나의 단위(목록, 폼, 표, 업로드, 모달 등)를 다루게 하고, 그것을 바꾸는 요인을 찾은 뒤, 다섯 가지 상태 묶음을 훑습니다. 데이터 수명 주기(초기, 로딩, 새로고침 중, 더 불러오기, 여러 형태의 빈 상태, 부분 성공, 오래된 데이터), 오류와 이용 불가(복구 가능, 입력 검증, 권한 없음, 찾을 수 없음, 오프라인, 요청 제한, 예상치 못한 실패, 충돌), 상호작용 상태(호버, 포커스, 선택, 비활성, 읽기 전용, 진행 중, 성공, 파괴적 작업, 드래그), 내용의 극단(0개·1개·다수, 매우 길거나 없는 텍스트, 깨진 미디어, 특이한 데이터), 맥락(첫 사용, 저장된 상태, 역할, 동시성, 중단, 환경설정)입니다. 해당되는 각 상태마다 사용자가 무엇을 보는지, 다음에 무엇을 할 수 있는지, 어떻게 빠져나오는지, 정확한 문구가 무엇인지 묻습니다.
함께 다루는 것
상태 문구 작성법, 테스트할 때 각 상태를 일부러 일으키는 방법, 상태별 표와 목록·폼·버튼·검색·업로드·모달·차트·알림·인증 체크리스트가 있는 참고 파일. 출력은 상태 표와 우선순위가 매겨진 빈틈 목록입니다.
이런 때 좋습니다
출시 전 화면 검토, '정상 흐름은 되는데 나머지는 다 깨진다'의 원인 찾기.
낮은 위험：스크립트가 없는 지침 패키지로, 네트워크 접속이나 파일 쓰기가 없습니다. 사용자가 설명하거나 붙여넣은 내용을 검토하며, 코드를 보지 못했을 때는 추측하지 않고 상태를 '알 수 없음'으로 표시합니다(시험 실행에서도 그랬습니다). 상태를 대신 일으킬 수는 없으므로 검증 단계는 직접 실행해야 합니다. 제안하는 오류·빈 상태 문구는 출발점이며 제품의 어조와 현지 언어 품질에 맞춰 검토해야 합니다. AIBars가 만든 오리지널(MIT). 가상의 청구서 표로 한 번 시험 실행했습니다.