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.
Was es macht
Die meisten UI-Fehler stecken in Zuständen, die niemand entworfen hat. Dieser Skill lässt Sie jeweils eine Einheit bearbeiten (eine Liste, ein Formular, eine Tabelle, einen Upload, einen Dialog), herausfinden, was sie verändert, und fünf Zustandsgruppen durchgehen: Datenlebenszyklus (initial, Laden, Aktualisieren, Nachladen, leer in seinen Varianten, teilweise, veraltet), Fehler und Nichtverfügbarkeit (behebbar, Validierung, Berechtigung verweigert, nicht gefunden, offline, Ratenbegrenzung, unerwartet, Konflikt), Interaktionszustände (Hover, Fokus, ausgewählt, deaktiviert, schreibgeschützt, in Arbeit, Erfolg, destruktiv, Ziehen), inhaltliche Extreme (null, eins und viele, sehr langer oder fehlender Text, defekte Medien, ungewöhnliche Daten) und Kontext (Erstnutzung, gespeicherter Zustand, Rollen, Nebenläufigkeit, Unterbrechung, Einstellungen). Für jeden zutreffenden Zustand fragt er, was Nutzer sehen, was sie als Nächstes tun können, wie sie ihn verlassen und welcher Wortlaut gilt.
Außerdem
Wie man Zustandstexte schreibt, wie man beim Testen jeden Zustand erzwingt, und eine Referenzdatei mit Tabelle je Zustand und Checklisten für Listen, Formulare, Buttons, Suche, Uploads, Dialoge, Diagramme, Benachrichtigungen und Authentifizierung. Ergebnis ist eine Zustandstabelle mit priorisierter Lückenliste.
Geeignet für
Einen Bildschirm vor dem Release prüfen und herausfinden, warum „der Glücksfall funktioniert, aber alles andere bricht“.
Geringes Risiko: Reine Anweisungen ohne Skripte, ohne Netzwerkzugriff und ohne Dateischreiben. Es prüft, was Sie beschreiben oder einfügen; hat es den Code nicht gesehen, markiert es Zustände als „unbekannt“, statt zu raten, wie der Test zeigte. Es kann die Zustände nicht für Sie erzwingen, die Verifikationsschritte führen Sie selbst aus. Die vorgeschlagenen Texte für Fehler und leere Zustände sind ein Ausgangspunkt und sollten auf Ton Ihres Produkts und sprachliche Qualität geprüft werden. Originalwerk von AIBars (MIT). Einmal mit einer erfundenen Rechnungstabelle ausprobiert.