break-ui

Try to break a piece of UI by feeding it worst-case data — long names, unbreakable emails, one-letter names, missing fields, huge counts, zero items, long labels, non-Latin text, emoji, extreme numbers — then render it behind a "Demo data / Worst case" toggle and report everything that broke, with the fix for each. Use when the user asks to stress-test, break, or find edge cases in a component or screen, or to "try the worst case". For visual design critique use emil-design-eng; for motion use review-animations.

Try your first task

Stress-test a component with realistic data

Start a fresh conversation.

Use break-ui to stress-test the supplied component with plausible worst-case data. Inspect the values it renders and any available schema limits, then provide demo and worst-case datasets behind a dev-only toggle through its existing data boundary. Report what breaks and propose a fix for each issue, then stop before fixing.

Required inputs

The target component and its existing props, fixture, mock, or API stub.
Available validation schemas or API contracts defining field limits.
A development environment or prototype route for the data toggle.

Suggested template by Skill Leaderboard, grounded in the linked source. Task evidence ↗

Inside SKILL.md

175 lines

Section content has not been verified for this skill yet.

Full source remains withheld under the current source-display policy. Read the author’s source ↗