Skip to content
All skills

/break-ui

Break UI

Tries to break your UI by using worst-case data: long names, unusual emails, one-letter names, huge counts, and empty lists. It creates a report and fixes each issue.

Updated October 2, 2026

What it does

  • Maps every field in your UI so it knows how long the dynamic values can get
  • Builds a worst-case dataset: long, short, missing, huge, empty, non-Latin, emojis
  • Puts it behind a “Demo data / Worst case” toggle, so you can see the before and after
  • Reports each broken UI element with its cause and fix, like min-width: 0 or Intl.PluralRules

When to use it

This has many use cases, but I personally use it before I ship any feature. Literally any feature. Prevents unexpected surprises in production.

What the skill changed

The skill prepares you for the worst-case scenario by simply showing you what it would look like. It then fixes the issues, so the UI looks good regardless of how wild the data is. You can see the before and after below.

Example prompts

You don’t need special wording. Describe the problem the way you’d describe it to a teammate. Here are some more to try on your own product.

The course behind these skills

These skills come from what I teach in AI for UI. Join the waitlist to get two lessons and be the first to know when enrollment reopens on December 8.