Emil Kowalski's agent skill that feeds your UI the worst realistic data (long names, unbreakable emails, one-letter names, missing fields, huge counts, empty lists, non-Latin text), puts it behind a "Demo data / Worst case" toggle, and reports what broke along with a fix for each.
Install it with:
npx skills add https://github.com/emilkowalski/skills --skill break-uiThe idea is that demo data is picked, often without anyone noticing, so the design looks good: names that fit on one line, counts that never need a separator, every optional field filled in. This skill undoes that. The agent lists every value a component renders and looks up its real limit in the Zod schema, the database column or the form maxLength. Then it builds one worst-case fixture next to the existing demo data, plus empty, single-item and 1,000+ row states, and swaps them in at the data boundary instead of editing the markup.
It rejects nonsense input on purpose. "aaaaaaaa…" doesn't count, and every value has to be something a real user could produce. It also goes past long text to the breaks that actually ship: "1 members", wrong initials, a squished avatar, an orphaned dash where an optional role used to be, a ••• menu pushed off the row. It checks at the real container width, at 320px, at 200% zoom, and in dark mode and RTL. You get a table of Broken / Ugly / Fragile findings with a CSS-level fix for each, then it stops and waits for fix all or fix 1, 3. The fixes include things like min-width: 0, overflow-wrap: anywhere, Intl.PluralRules and tabular-nums.