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.
它做什么
大多数界面 bug 都出在没人设计的状态里。这个 Skill 让你一次只处理一个单元（一个列表、表单、表格、上传或弹窗），找出是什么在改变它，再过五组状态：数据生命周期（初始、加载、刷新、加载更多、各种不同的空状态、部分成功、过期）、错误与不可用（可恢复、校验、无权限、找不到、离线、被限流、意外失败、冲突）、交互状态（悬停、聚焦、选中、禁用、只读、进行中、成功、破坏性操作、拖动）、内容极端情况（零个、一个和很多个、很长或缺失的文字、损坏的媒体、不寻常的数据）以及上下文（首次使用、已保存状态、角色、并发、被打断、偏好设置）。对每一种适用的状态，它会问：用户看到什么、下一步能做什么、怎么离开这个状态，以及具体的文字。
还涵盖
怎么写状态文案、测试时怎么逐个强制出现每种状态，以及一份参考文件，里面有逐状态的表格和针对列表、表单、按钮、搜索、上传、弹窗、图表、通知和认证的清单。输出是一张状态表，外加按优先级排序的缺口清单。
适合什么场景
发布前审查一个界面，以及弄清“正常流程能跑通，其他全崩”的原因。
低风险：纯指令文件，没有脚本，不联网、不写文件。它审查的是你描述或粘贴的内容；没看到代码时，会把状态标为“未知”而不是瞎猜，试用里就是这样。它不能替你强制触发这些状态，所以验证步骤要你自己去跑。它为错误和空状态建议的文案只是起点，需要结合你产品的语气和当地语言质量来审阅。AIBars 原创（MIT）。已用一个虚构的发票表格试用过一次。