@tamsensedev/runner 0.13.0 → 0.18.0

package/library/skills/interface-polish/references/detail-rules.md

@@ -1,154 +1,154 @@
-# Detail rules with code
-
-Read this when applying a specific polish rule and you want the exact values. Examples are in plain CSS with a Tailwind equivalent where it helps; translate them into the project's styling system and tokens.
-
-## Concentric radius
-
-```css
-.card       { border-radius: 16px; padding: 8px; }  /* 8 + 8 */
-.card-inner { border-radius: 8px; }
-```
-
-Tailwind: `rounded-2xl p-2` (16px radius, 8px padding) on the outer element, `rounded-lg` (8px = 16 - 8) on the inner one.
-
-With padding over about 24px, the layers read as separate surfaces; choose each radius from the scale.
-
-## Optical alignment
-
-```css
-.button-with-trailing-icon { padding-inline: 16px 14px; } /* icon side = text side - 2px */
-.play-button svg { translate: 2px 0; }                    /* triangle's visual centre */
-```
-
-For lopsided icons (stars, carets), adjust the SVG `viewBox` or path so no wrapper offset is needed.
-
-## Shadow as border, and elevation
-
-```css
-:root {
-  --shadow-border:
-    0 0 0 1px rgb(0 0 0 / 0.06),
-    0 1px 2px -1px rgb(0 0 0 / 0.06),
-    0 2px 4px 0 rgb(0 0 0 / 0.04);
-  --shadow-border-hover:
-    0 0 0 1px rgb(0 0 0 / 0.08),
-    0 1px 2px -1px rgb(0 0 0 / 0.08),
-    0 2px 4px 0 rgb(0 0 0 / 0.06);
-}
-.dark {
-  --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
-  --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.13);
-}
-.card { box-shadow: var(--shadow-border); transition: box-shadow 150ms ease-out; }
-.card:hover { box-shadow: var(--shadow-border-hover); }
-```
-
-| Prefer a shadow | Keep a border |
-|---|---|
-| Cards and buttons on varied backgrounds | Dividers between list items |
-| Floating layers (menus, popovers, dialogs) | Table cell boundaries |
-| Hover lift on clickable cards | Form input outlines |
-
-Use this only if it matches the product's depth strategy; a product built on plain borders keeps borders.
-
-## Image outlines
-
-```css
-img.media { outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px; }
-.dark img.media { outline-color: rgb(255 255 255 / 0.1); }
-```
-
-Tailwind: `outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10`. Pure black or white only, never a tinted grey from the palette.
-
-## Hit areas
-
-```css
-.icon-button { position: relative; width: 20px; height: 20px; }
-.icon-button::after {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  width: 44px; height: 44px;
-  translate: -50% -50%;
-}
-```
-
-If the extended area would overlap a neighbour, shrink it to the largest size that does not.
-
-## Type rendering
-
-```css
-html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
-h1, h2, h3 { text-wrap: balance; }      /* short text only: browsers balance up to about 6 lines */
-p, li, figcaption { text-wrap: pretty; }
-.num { font-variant-numeric: tabular-nums; }
-```
-
-`tabular-nums` belongs on counters, timers, prices that update and table columns, not on phone numbers, version strings or decorative display numbers. Some fonts change the look of "1" with it; check it renders well.
-
-Font family is not a polish decision: use the product's type system and never add a paid face for polish.
-
-## Overflow in rows
-
-```css
-.row        { display: flex; align-items: center; gap: 12px; }
-.row-avatar { flex-shrink: 0; }
-.row-text   { min-width: 0; flex: 1; }
-.row-email  { overflow-wrap: anywhere; }
-.row-badge  { flex-shrink: 0; white-space: nowrap; }
-.row-menu   { flex-shrink: 0; }
-```
-
-Grid equivalent: `grid-template-columns: auto minmax(0, 1fr) auto`. When text can wrap to several lines, top-align the row (`align-items: flex-start`) so the avatar does not drift.
-
-## Icons
-
-| Text beside the icon | Stroke on a 24px grid |
-|---|---|
-| Regular (400), 14 to 16px | 1.5px |
-| Medium or semibold (500 to 600) | 2px |
-| Bold (700) or standalone emphasis | 2.5px |
-
-```html
-<svg fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">...</svg>
-```
-
-```css
-.icon-button { color: var(--text-muted); }
-.icon-button:hover { color: var(--text); }
-.icon-button[aria-pressed="true"] { color: var(--accent); }
-```
-
-Strip hard-coded `fill` and `stroke` colours from imported icons. Inline icons are about 1em to 1.25em. Directional icons (back, forward, chevrons, send) flip in RTL; logos, checkmarks, clocks and media controls do not. Icon-only buttons need an accessible name; decorative icons get `aria-hidden="true"`.
-
-## Press feedback and transitions
-
-```css
-.button {
-  transition-property: transform, background-color;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-.button:active:not(:disabled) { transform: scale(0.97); }
-
-@media (hover: hover) and (pointer: fine) {
-  .card-link:hover { background-color: var(--surface-hover); }
-}
-```
-
-Tailwind: `transition-[transform,background-color] duration-150 active:not-disabled:scale-[0.97]`. Never `transition-all`. Use `will-change: transform` only to cure an observed first-frame stutter, never broadly.
-
-## Focus
-
-```css
-:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
-.input:focus-visible { outline-offset: 0; }
-```
-
-Never `outline: none` without a replacement. Sticky headers and footers must not cover the focused element: `scroll-padding-top` on the scroll container equal to the header height.
-
-## Overlays and clipping
-
-A menu inside an `overflow: hidden` or `overflow: auto` ancestor is clipped. Use the project's popover or portal component, `<dialog>`, the `popover` attribute, or `position: fixed` with collision handling. Popovers scale from their trigger (`transform-origin` at the trigger), dialogs from the centre.
-
-Sources: adapted from jakubkrehel/make-interfaces-feel-better surfaces, typography, icons, animations and performance references (MIT, changed: values reconciled to scale(0.97), Motion-specific code removed, plain CSS first), emilkowalski/skills break-ui failure signatures (MIT) and pbakaus/impeccable operate reference (Apache-2.0, changed: rewritten).
+# Detail rules with code
+
+Read this when applying a specific polish rule and you want the exact values. Examples are in plain CSS with a Tailwind equivalent where it helps; translate them into the project's styling system and tokens.
+
+## Concentric radius
+
+```css
+.card       { border-radius: 16px; padding: 8px; }  /* 8 + 8 */
+.card-inner { border-radius: 8px; }
+```
+
+Tailwind: `rounded-2xl p-2` (16px radius, 8px padding) on the outer element, `rounded-lg` (8px = 16 - 8) on the inner one.
+
+With padding over about 24px, the layers read as separate surfaces; choose each radius from the scale.
+
+## Optical alignment
+
+```css
+.button-with-trailing-icon { padding-inline: 16px 14px; } /* icon side = text side - 2px */
+.play-button svg { translate: 2px 0; }                    /* triangle's visual centre */
+```
+
+For lopsided icons (stars, carets), adjust the SVG `viewBox` or path so no wrapper offset is needed.
+
+## Shadow as border, and elevation
+
+```css
+:root {
+  --shadow-border:
+    0 0 0 1px rgb(0 0 0 / 0.06),
+    0 1px 2px -1px rgb(0 0 0 / 0.06),
+    0 2px 4px 0 rgb(0 0 0 / 0.04);
+  --shadow-border-hover:
+    0 0 0 1px rgb(0 0 0 / 0.08),
+    0 1px 2px -1px rgb(0 0 0 / 0.08),
+    0 2px 4px 0 rgb(0 0 0 / 0.06);
+}
+.dark {
+  --shadow-border: 0 0 0 1px rgb(255 255 255 / 0.08);
+  --shadow-border-hover: 0 0 0 1px rgb(255 255 255 / 0.13);
+}
+.card { box-shadow: var(--shadow-border); transition: box-shadow 150ms ease-out; }
+.card:hover { box-shadow: var(--shadow-border-hover); }
+```
+
+| Prefer a shadow | Keep a border |
+|---|---|
+| Cards and buttons on varied backgrounds | Dividers between list items |
+| Floating layers (menus, popovers, dialogs) | Table cell boundaries |
+| Hover lift on clickable cards | Form input outlines |
+
+Use this only if it matches the product's depth strategy; a product built on plain borders keeps borders.
+
+## Image outlines
+
+```css
+img.media { outline: 1px solid rgb(0 0 0 / 0.1); outline-offset: -1px; }
+.dark img.media { outline-color: rgb(255 255 255 / 0.1); }
+```
+
+Tailwind: `outline outline-1 -outline-offset-1 outline-black/10 dark:outline-white/10`. Pure black or white only, never a tinted grey from the palette.
+
+## Hit areas
+
+```css
+.icon-button { position: relative; width: 20px; height: 20px; }
+.icon-button::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: 44px; height: 44px;
+  translate: -50% -50%;
+}
+```
+
+If the extended area would overlap a neighbour, shrink it to the largest size that does not.
+
+## Type rendering
+
+```css
+html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+h1, h2, h3 { text-wrap: balance; }      /* short text only: browsers balance up to about 6 lines */
+p, li, figcaption { text-wrap: pretty; }
+.num { font-variant-numeric: tabular-nums; }
+```
+
+`tabular-nums` belongs on counters, timers, prices that update and table columns, not on phone numbers, version strings or decorative display numbers. Some fonts change the look of "1" with it; check it renders well.
+
+Font family is not a polish decision: use the product's type system and never add a paid face for polish.
+
+## Overflow in rows
+
+```css
+.row        { display: flex; align-items: center; gap: 12px; }
+.row-avatar { flex-shrink: 0; }
+.row-text   { min-width: 0; flex: 1; }
+.row-email  { overflow-wrap: anywhere; }
+.row-badge  { flex-shrink: 0; white-space: nowrap; }
+.row-menu   { flex-shrink: 0; }
+```
+
+Grid equivalent: `grid-template-columns: auto minmax(0, 1fr) auto`. When text can wrap to several lines, top-align the row (`align-items: flex-start`) so the avatar does not drift.
+
+## Icons
+
+| Text beside the icon | Stroke on a 24px grid |
+|---|---|
+| Regular (400), 14 to 16px | 1.5px |
+| Medium or semibold (500 to 600) | 2px |
+| Bold (700) or standalone emphasis | 2.5px |
+
+```html
+<svg fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">...</svg>
+```
+
+```css
+.icon-button { color: var(--text-muted); }
+.icon-button:hover { color: var(--text); }
+.icon-button[aria-pressed="true"] { color: var(--accent); }
+```
+
+Strip hard-coded `fill` and `stroke` colours from imported icons. Inline icons are about 1em to 1.25em. Directional icons (back, forward, chevrons, send) flip in RTL; logos, checkmarks, clocks and media controls do not. Icon-only buttons need an accessible name; decorative icons get `aria-hidden="true"`.
+
+## Press feedback and transitions
+
+```css
+.button {
+  transition-property: transform, background-color;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.button:active:not(:disabled) { transform: scale(0.97); }
+
+@media (hover: hover) and (pointer: fine) {
+  .card-link:hover { background-color: var(--surface-hover); }
+}
+```
+
+Tailwind: `transition-[transform,background-color] duration-150 active:not-disabled:scale-[0.97]`. Never `transition-all`. Use `will-change: transform` only to cure an observed first-frame stutter, never broadly.
+
+## Focus
+
+```css
+:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
+.input:focus-visible { outline-offset: 0; }
+```
+
+Never `outline: none` without a replacement. Sticky headers and footers must not cover the focused element: `scroll-padding-top` on the scroll container equal to the header height.
+
+## Overlays and clipping
+
+A menu inside an `overflow: hidden` or `overflow: auto` ancestor is clipped. Use the project's popover or portal component, `<dialog>`, the `popover` attribute, or `position: fixed` with collision handling. Popovers scale from their trigger (`transform-origin` at the trigger), dialogs from the centre.
+
+Sources: adapted from jakubkrehel/make-interfaces-feel-better surfaces, typography, icons, animations and performance references (MIT, changed: values reconciled to scale(0.97), Motion-specific code removed, plain CSS first), emilkowalski/skills break-ui failure signatures (MIT) and pbakaus/impeccable operate reference (Apache-2.0, changed: rewritten).

package/library/skills/interface-polish/references/worst-case-data.md

@@ -1,158 +1,158 @@
-# Stress-testing with worst-case data
-
-Read this when checking that a component or screen survives real data, before finishing UI work or as part of a review.
-
-The component was almost certainly built against kind data: "Jane Doe, jane@acme.com, 12 members". Production has Aleksandra Wiśniewska-Kowalczyk, `bartholomew.fitzgerald@northwind-industries-holdings.example.com`, an intern called Jo and a workspace with 1,284 members.
-
-## Rules
-
-1. **Plausible or schema-backed, never random.** Each value is something a real user could produce, or the actual limit from the validation schema, database column or API contract. Five thousand "a" characters prove nothing. If no limit exists, that is a finding ("unbounded"); test something long but believable.
-2. **Change the data, not the component.** The worst case enters through the same boundary as the demo data: the fixture, mock, story args, seed, or an intercepted API response. Never edit markup or CSS to provoke a break.
-3. **One dataset, many failures.** Spread different worst cases across the first rows (row 1 the long name, row 2 the long email, row 3 the one-letter name), the way real data mixes them.
-4. **Do not stop at long text.** The breaks that ship are the short name, the missing avatar, "1 members", the empty list, the translated badge.
-5. **Leave no test toggles in product code.** In a code step, a worst-case fixture may be committed only where the project keeps fixtures (tests, stories, mocks), following its conventions. In a review step, use only interception or existing fixtures and change nothing.
-
-## Phase 1: map what the component renders
-
-List every value it shows, with its source, type, limit and whether it is optional:
-
-| Field | Source | Type | Limit | Optional |
-|---|---|---|---|---|
-| name | member.name | string | 255 (schema.ts:14) | no |
-| email | member.email | string | none found | no |
-| role | member.title | string | 120 | yes |
-| status | enum | active / invited / expired | n/a | no |
-| count | workspace.memberCount | int | n/a | no |
-
-Include the values people forget: counts in headers, relative times, badge and status text, labels that come from data, tooltips, avatar images, and the list length itself. Find limits in validation schemas, migrations, API types and `maxlength` attributes; note where front end and back end disagree.
-
-## Phase 2: build the worst case
-
-Pick values from the catalog below. Also cover cases that are not one dataset:
-
-- **Empty**: zero items, and no results after filtering.
-- **One**: a single item, and every count at exactly 1.
-- **Huge**: the realistic upper bound (1,000 or more rows if unpaginated).
-
-## Phase 3: look
-
-Check the worst case:
-
-- at the component's real container width (a sidebar list is not a full-page list), then at 320px and the widest supported layout;
-- with browser zoom at 200%, because text grows and boxes do not;
-- in dark mode and with `dir="rtl"` if the product supports them.
-
-Screenshot both demo and worst case at each width (procedure in `design-review`). Say which findings you saw and which you inferred from code.
-
-## Catalog
-
-Use `example.com`, `example.org` or `.test` domains so fixtures never point at real inboxes.
-
-**People and names**
-
-| Value | Breaks |
-|---|---|
-| `Aleksandra Wiśniewska-Kowalczyk` | Long, hyphenated, diacritics; wraps at the hyphen |
-| `Christopher Alexander Montgomery III` | Suffix; naive initials give "CI" |
-| `Jo`, `J` | Near-empty name column; one-letter initials; tiny click target if the name is the link |
-| `Đặng Thị Ngọc Hân` | Stacked diacritics clipped by tight line height with `overflow: hidden` |
-| `王秀英` | No spaces; "first plus last word" initials find one word |
-| `نور الهدى عبد الرحمن` | RTL; punctuation and icons on the wrong side without `dir="auto"` |
-| `Seán O'Brien-Ó Súilleabháin` | Apostrophe and accents: escaping, initials, search |
-| A name starting with an emoji ("Fox" after a fox emoji), or with a skin-tone and joiner sequence before "Priya" | `charAt(0)` returns half a character; slicing splits the sequence |
-| `  Sam   Lee ` | Leading, trailing and repeated spaces |
-| missing name | Only an email; the UI needs a fallback |
-
-**Emails, URLs, identifiers**
-
-| Value | Breaks |
-|---|---|
-| `bartholomew.fitzgerald@northwind-industries-holdings.example.com` | No wrap points; pushes siblings off the row |
-| `a@b.co` | Layout that assumed a long email looks empty |
-| `first.last+billing-notifications@example.com` | Plus addressing rejected or truncated |
-| A long URL with query string | End truncation hides the part that differs |
-| `9f8e7d6c-5b4a-4c3d-8e2f-1a0b9c8d7e6f` | UUID width; candidate for middle truncation |
-| `Q3 Board Deck FINAL (revised) v12 [approved].pdf` | End truncation hides version and extension |
-
-**Labels and text from data**
-
-| Value | Breaks |
-|---|---|
-| `Senior Product Design Engineer, Platform Infrastructure` | Wraps to three lines in a secondary slot |
-| `Invitation expired 12 days ago` as a badge | Badge wraps or squeezes the name |
-| `Benachrichtigungseinstellungen` | German compound, no break points |
-| French or German UI strings | About 30% longer than English |
-| Twelve tags on one item | Tag rows become a wall; needs "+8" |
-| Empty string or whitespace title | Collapsed heading, zero-height row |
-| `<script>alert(1)</script>`, `&amp;`, `**bold**` | Must render as literal text |
-| A 2,000-character description | Clamping, "show more", textarea growth |
-
-**Numbers and money**
-
-| Value | Breaks |
-|---|---|
-| 0 | "0 members", empty bars, division by zero in percentages |
-| 1 | "1 members", "1 days ago" |
-| 1284, 1000000 | Missing separators; badge width; consider compact form where precision does not matter |
-| 12345678.9 as currency | Overflowing totals columns |
-| -42.5 | Sign, colour logic, accounting parentheses |
-| 0.1 + 0.2 | `0.30000000000000004` rendered raw |
-| 142%, -3% | Progress bars past their bounds |
-| null, undefined, NaN | Rendered literally |
-| A live value 99 then 100 | Width jump without tabular figures |
-
-**Collections**: 0 items; 1 item (grids that look broken with one card); exactly the page size and one more; 1,000+ unpaginated; one item ten times larger than the others; items with identical names.
-
-**Time**: now ("0 seconds ago"); 12 days, 11 months, 3 years ago (switch to absolute dates); a future date; `1970-01-01`; a time near midnight in another time zone; a duration of 1,284 hours.
-
-**Images**: avatar URL that fails (fallback to initials); no avatar; a 4000 x 200 panorama and a 200 x 4000 strip (need `object-fit: cover`); a dark transparent logo on a dark theme; a slow image (needs fixed dimensions).
-
-**States**: loading; API error (no raw `TypeError` text on screen); partial data; every status value at once; no permission; the current user in the list.
-
-## Failure signatures
-
-| What you see | Cause | Fix |
-|---|---|---|
-| Avatar or icon squashed into an oval | Flex child shrinking | `flex-shrink: 0` on fixed-size items |
-| Text overflows instead of wrapping or truncating | `min-width: auto` on a flex or grid child | `min-width: 0`, or `minmax(0, 1fr)` |
-| Email or URL runs past the edge | No break opportunities | `overflow-wrap: anywhere` on that element |
-| Trailing menu pushed off-screen | Middle content took the space | `min-width: 0` on the middle, `flex-shrink: 0` on the action |
-| Badge wraps onto two lines | Badge allowed to shrink | `white-space: nowrap; flex-shrink: 0`, decide what yields |
-| Avatar adrift beside a three-line name | `align-items: center` on rows of varying height | Top-align once text can wrap |
-| Last row cut mid-glyph | Fixed height without scroll affordance | Visible scroll or a fade, intended `overflow` |
-| Heading breaks mid-word | `word-break: break-all` | `overflow-wrap: anywhere` |
-| Wrong initials | `split(' ')[0][0]` | Grapheme-aware initials (`Intl.Segmenter`), first and last word, icon fallback |
-| Orphaned dash where an optional field was | Placeholder for a missing value | Omit the line, or reserve its height on purpose |
-| "1 members" | Hard-coded plural | `Intl.PluralRules` or the project's i18n |
-| Numbers jitter as they update | Proportional figures | `tabular-nums` |
-| `1284`, `NaN`, `undefined` | Raw number rendered | `Intl.NumberFormat`, guard null |
-| Translated button label overflows | Fixed width | Width from content with a `min-width` |
-| Tall scripts clipped | Tight line height with hidden overflow | Looser line height, no clipping on text |
-| Broken-image icon | No error fallback | Fall back to initials or a neutral icon |
-| Truncated text with no way to read it | Ellipsis only | Title or tooltip, and the full value in a detail view |
-| 1,000 rows stutter | Every row rendered | Virtualize or paginate |
-| Raw `<b>`, `&amp;` or `**text**` shown | Wrong escaping layer | Escape once at render; never inject user HTML |
-
-## Truncate, wrap or clamp
-
-Decide per field:
-
-- **Wrap** what identifies something (names, titles in a detail view). Two lines is fine; four means the column is too narrow.
-- **Truncate at the end** for secondary metadata where the start carries the meaning (role, preview text), always with a way to see the full value.
-- **Truncate in the middle** where items differ at the end (file names, paths, hashes, emails sharing a long domain).
-- **Clamp** (`line-clamp: 2`) multi-line previews in cards so heights stay predictable.
-- **Never truncate** numbers, amounts, dates, or anything people compare.
-
-## Output
-
-| # | Severity | Field | Worst-case value | What happens | Fix (`file:line`) |
-|---|---|---|---|---|---|
-| 1 | Broken | email | `bartholomew.fitzgerald@...example.com` | Menu unreachable at 400px | `min-width: 0` on text column, `overflow-wrap: anywhere` on email |
-| 2 | Ugly | count | 1 | "1 members" | Plural rules |
-| 3 | Fragile | name | n/a | No max length in schema or form | Matching limits in both |
-
-Severity: **Broken** (unreadable, unreachable, wrong data), **Ugly** (readable but visibly wrong), **Fragile** (fine now, one realistic step from breaking). Also list what held up, so the test is visibly real.
-
-In a code step, fix the breaks; where there are several right answers (truncate or wrap, what an empty role shows), choose by the rules above, apply it, and list the choice in the report. In a review step, report only.
-
-Sources: adapted from emilkowalski/skills break-ui SKILL.md and CATALOG.md (MIT, changed: no interactive toggle shipped, no "report and wait for the user" step; code steps fix, review steps report) and pbakaus/impeccable harden reference (Apache-2.0, changed: rewritten).
+# Stress-testing with worst-case data
+
+Read this when checking that a component or screen survives real data, before finishing UI work or as part of a review.
+
+The component was almost certainly built against kind data: "Jane Doe, jane@acme.com, 12 members". Production has Aleksandra Wiśniewska-Kowalczyk, `bartholomew.fitzgerald@northwind-industries-holdings.example.com`, an intern called Jo and a workspace with 1,284 members.
+
+## Rules
+
+1. **Plausible or schema-backed, never random.** Each value is something a real user could produce, or the actual limit from the validation schema, database column or API contract. Five thousand "a" characters prove nothing. If no limit exists, that is a finding ("unbounded"); test something long but believable.
+2. **Change the data, not the component.** The worst case enters through the same boundary as the demo data: the fixture, mock, story args, seed, or an intercepted API response. Never edit markup or CSS to provoke a break.
+3. **One dataset, many failures.** Spread different worst cases across the first rows (row 1 the long name, row 2 the long email, row 3 the one-letter name), the way real data mixes them.
+4. **Do not stop at long text.** The breaks that ship are the short name, the missing avatar, "1 members", the empty list, the translated badge.
+5. **Leave no test toggles in product code.** In a code step, a worst-case fixture may be committed only where the project keeps fixtures (tests, stories, mocks), following its conventions. In a review step, use only interception or existing fixtures and change nothing.
+
+## Phase 1: map what the component renders
+
+List every value it shows, with its source, type, limit and whether it is optional:
+
+| Field | Source | Type | Limit | Optional |
+|---|---|---|---|---|
+| name | member.name | string | 255 (schema.ts:14) | no |
+| email | member.email | string | none found | no |
+| role | member.title | string | 120 | yes |
+| status | enum | active / invited / expired | n/a | no |
+| count | workspace.memberCount | int | n/a | no |
+
+Include the values people forget: counts in headers, relative times, badge and status text, labels that come from data, tooltips, avatar images, and the list length itself. Find limits in validation schemas, migrations, API types and `maxlength` attributes; note where front end and back end disagree.
+
+## Phase 2: build the worst case
+
+Pick values from the catalog below. Also cover cases that are not one dataset:
+
+- **Empty**: zero items, and no results after filtering.
+- **One**: a single item, and every count at exactly 1.
+- **Huge**: the realistic upper bound (1,000 or more rows if unpaginated).
+
+## Phase 3: look
+
+Check the worst case:
+
+- at the component's real container width (a sidebar list is not a full-page list), then at 320px and the widest supported layout;
+- with browser zoom at 200%, because text grows and boxes do not;
+- in dark mode and with `dir="rtl"` if the product supports them.
+
+Screenshot both demo and worst case at each width (procedure in `design-review`). Say which findings you saw and which you inferred from code.
+
+## Catalog
+
+Use `example.com`, `example.org` or `.test` domains so fixtures never point at real inboxes.
+
+**People and names**
+
+| Value | Breaks |
+|---|---|
+| `Aleksandra Wiśniewska-Kowalczyk` | Long, hyphenated, diacritics; wraps at the hyphen |
+| `Christopher Alexander Montgomery III` | Suffix; naive initials give "CI" |
+| `Jo`, `J` | Near-empty name column; one-letter initials; tiny click target if the name is the link |
+| `Đặng Thị Ngọc Hân` | Stacked diacritics clipped by tight line height with `overflow: hidden` |
+| `王秀英` | No spaces; "first plus last word" initials find one word |
+| `نور الهدى عبد الرحمن` | RTL; punctuation and icons on the wrong side without `dir="auto"` |
+| `Seán O'Brien-Ó Súilleabháin` | Apostrophe and accents: escaping, initials, search |
+| A name starting with an emoji ("Fox" after a fox emoji), or with a skin-tone and joiner sequence before "Priya" | `charAt(0)` returns half a character; slicing splits the sequence |
+| `  Sam   Lee ` | Leading, trailing and repeated spaces |
+| missing name | Only an email; the UI needs a fallback |
+
+**Emails, URLs, identifiers**
+
+| Value | Breaks |
+|---|---|
+| `bartholomew.fitzgerald@northwind-industries-holdings.example.com` | No wrap points; pushes siblings off the row |
+| `a@b.co` | Layout that assumed a long email looks empty |
+| `first.last+billing-notifications@example.com` | Plus addressing rejected or truncated |
+| A long URL with query string | End truncation hides the part that differs |
+| `9f8e7d6c-5b4a-4c3d-8e2f-1a0b9c8d7e6f` | UUID width; candidate for middle truncation |
+| `Q3 Board Deck FINAL (revised) v12 [approved].pdf` | End truncation hides version and extension |
+
+**Labels and text from data**
+
+| Value | Breaks |
+|---|---|
+| `Senior Product Design Engineer, Platform Infrastructure` | Wraps to three lines in a secondary slot |
+| `Invitation expired 12 days ago` as a badge | Badge wraps or squeezes the name |
+| `Benachrichtigungseinstellungen` | German compound, no break points |
+| French or German UI strings | About 30% longer than English |
+| Twelve tags on one item | Tag rows become a wall; needs "+8" |
+| Empty string or whitespace title | Collapsed heading, zero-height row |
+| `<script>alert(1)</script>`, `&amp;`, `**bold**` | Must render as literal text |
+| A 2,000-character description | Clamping, "show more", textarea growth |
+
+**Numbers and money**
+
+| Value | Breaks |
+|---|---|
+| 0 | "0 members", empty bars, division by zero in percentages |
+| 1 | "1 members", "1 days ago" |
+| 1284, 1000000 | Missing separators; badge width; consider compact form where precision does not matter |
+| 12345678.9 as currency | Overflowing totals columns |
+| -42.5 | Sign, colour logic, accounting parentheses |
+| 0.1 + 0.2 | `0.30000000000000004` rendered raw |
+| 142%, -3% | Progress bars past their bounds |
+| null, undefined, NaN | Rendered literally |
+| A live value 99 then 100 | Width jump without tabular figures |
+
+**Collections**: 0 items; 1 item (grids that look broken with one card); exactly the page size and one more; 1,000+ unpaginated; one item ten times larger than the others; items with identical names.
+
+**Time**: now ("0 seconds ago"); 12 days, 11 months, 3 years ago (switch to absolute dates); a future date; `1970-01-01`; a time near midnight in another time zone; a duration of 1,284 hours.
+
+**Images**: avatar URL that fails (fallback to initials); no avatar; a 4000 x 200 panorama and a 200 x 4000 strip (need `object-fit: cover`); a dark transparent logo on a dark theme; a slow image (needs fixed dimensions).
+
+**States**: loading; API error (no raw `TypeError` text on screen); partial data; every status value at once; no permission; the current user in the list.
+
+## Failure signatures
+
+| What you see | Cause | Fix |
+|---|---|---|
+| Avatar or icon squashed into an oval | Flex child shrinking | `flex-shrink: 0` on fixed-size items |
+| Text overflows instead of wrapping or truncating | `min-width: auto` on a flex or grid child | `min-width: 0`, or `minmax(0, 1fr)` |
+| Email or URL runs past the edge | No break opportunities | `overflow-wrap: anywhere` on that element |
+| Trailing menu pushed off-screen | Middle content took the space | `min-width: 0` on the middle, `flex-shrink: 0` on the action |
+| Badge wraps onto two lines | Badge allowed to shrink | `white-space: nowrap; flex-shrink: 0`, decide what yields |
+| Avatar adrift beside a three-line name | `align-items: center` on rows of varying height | Top-align once text can wrap |
+| Last row cut mid-glyph | Fixed height without scroll affordance | Visible scroll or a fade, intended `overflow` |
+| Heading breaks mid-word | `word-break: break-all` | `overflow-wrap: anywhere` |
+| Wrong initials | `split(' ')[0][0]` | Grapheme-aware initials (`Intl.Segmenter`), first and last word, icon fallback |
+| Orphaned dash where an optional field was | Placeholder for a missing value | Omit the line, or reserve its height on purpose |
+| "1 members" | Hard-coded plural | `Intl.PluralRules` or the project's i18n |
+| Numbers jitter as they update | Proportional figures | `tabular-nums` |
+| `1284`, `NaN`, `undefined` | Raw number rendered | `Intl.NumberFormat`, guard null |
+| Translated button label overflows | Fixed width | Width from content with a `min-width` |
+| Tall scripts clipped | Tight line height with hidden overflow | Looser line height, no clipping on text |
+| Broken-image icon | No error fallback | Fall back to initials or a neutral icon |
+| Truncated text with no way to read it | Ellipsis only | Title or tooltip, and the full value in a detail view |
+| 1,000 rows stutter | Every row rendered | Virtualize or paginate |
+| Raw `<b>`, `&amp;` or `**text**` shown | Wrong escaping layer | Escape once at render; never inject user HTML |
+
+## Truncate, wrap or clamp
+
+Decide per field:
+
+- **Wrap** what identifies something (names, titles in a detail view). Two lines is fine; four means the column is too narrow.
+- **Truncate at the end** for secondary metadata where the start carries the meaning (role, preview text), always with a way to see the full value.
+- **Truncate in the middle** where items differ at the end (file names, paths, hashes, emails sharing a long domain).
+- **Clamp** (`line-clamp: 2`) multi-line previews in cards so heights stay predictable.
+- **Never truncate** numbers, amounts, dates, or anything people compare.
+
+## Output
+
+| # | Severity | Field | Worst-case value | What happens | Fix (`file:line`) |
+|---|---|---|---|---|---|
+| 1 | Broken | email | `bartholomew.fitzgerald@...example.com` | Menu unreachable at 400px | `min-width: 0` on text column, `overflow-wrap: anywhere` on email |
+| 2 | Ugly | count | 1 | "1 members" | Plural rules |
+| 3 | Fragile | name | n/a | No max length in schema or form | Matching limits in both |
+
+Severity: **Broken** (unreadable, unreachable, wrong data), **Ugly** (readable but visibly wrong), **Fragile** (fine now, one realistic step from breaking). Also list what held up, so the test is visibly real.
+
+In a code step, fix the breaks; where there are several right answers (truncate or wrap, what an empty role shows), choose by the rules above, apply it, and list the choice in the report. In a review step, report only.
+
+Sources: adapted from emilkowalski/skills break-ui SKILL.md and CATALOG.md (MIT, changed: no interactive toggle shipped, no "report and wait for the user" step; code steps fix, review steps report) and pbakaus/impeccable harden reference (Apache-2.0, changed: rewritten).