PlugWiki

break-ui Skill for Claude Code: Stress-Test a UI With Worst-Case Data

Feeds a UI component realistic worst-case data behind a Demo / Worst case toggle and reports what breaks, with a fix for each.

Installs
81.3K
on skills.sh
Stars
52.7K
on GitHub
Files
1
besides SKILL.md
Updated
Oct 2026
last repo commit

break-ui makes your assistant attack a component with the worst data a real user could produce. It maps every value the component renders, looks up limits in your validation schemas and database columns, builds one worst-case fixture next to your demo data, and wires a Demo data / Worst case toggle. It then checks the component at its real width, 320px, 200% zoom, and dark mode or RTL where relevant.

It reports first and fixes only when you ask. The report lists each break by severity (Broken, Ugly, Fragile) with the worst-case value, what happens and a fix, then decisions for you and what held up. When first invoked with no question it replies with one fixed line and waits. The folder bundles a CATALOG.md of breaking values and no scripts.

Good for

  • Front-end developers who tested only with Jane Doe data
  • Designers checking long names, empty states and one-item lists
  • Teams adding a regression fixture to a component

Install break-ui

Claude Code

  1. 1

    Copy this prompt.

    Install the break-ui skill in Claude Code. Run this command:

npx skills add https://github.com/emilkowalski/skills --skill break-ui

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

  1. Initial Response
  2. Operating Posture
  3. Hard Rules
  4. Workflow
  5. Phase 1 — Map the surface
  6. Phase 2 — Build the worst case
  7. Phase 3 — Wire the toggle
  8. Phase 4 — Break it
  9. Phase 5 — Report and stop
  10. Phase 6 — Fix on request
  11. Required Output Format
  12. Part 1 — What broke
  13. Part 2 — Decisions for you
  14. Part 3 — What held up
  15. Invocation Variants
  16. Tone

Key facts

Author
Emil Kowalski
Repo
emilkowalski/skills
Installs on skills.sh
81,324 (Nov 2, 2026)
GitHub stars (whole repo)
52,705 (Nov 2, 2026)
License
MIT
Last repo commit
Oct 28, 2026
Files in the skill folder
2 files: CATALOG.md, SKILL.md
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass
Bundled reference
CATALOG.md of worst-case values
Invocations
<component>, <component> + fix, fix all or fix 1, 3, data only <component>

What it includes

  • Lists every rendered value with its source, type and limit

    Files · Phase 1: Map the surface

  • Builds one fixture from CATALOG.md plus empty, one-item and 1,000-row cases

    Write · Phase 2: Build the worst case

  • Adds a dev-only Demo data / Worst case switch, or a single HTML file

    Write · Phase 3: Wire the toggle

  • Checks real width, 320px, 200% zoom, dark mode and RTL; screenshots if possible

    Phase 4: Break it

  • Lists breaks by severity with the value, the effect and a fix

    Phase 5: Report and stop

  • Applies the fixes you pick, then re-checks every state

    Write · Phase 6: Fix on request

From the official docs

Permissions

Low risk

The skill writes a fixture and a dev-only toggle into your project. Review the added files before you commit them.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It adds a worst-case fixture and a toggle to your project

    SKILL.md says the toggle is dev-only and never ships to production. Check the diff and keep it out of production builds. github.com

  • It reports before it changes your component

    Fixes are applied only when you ask. The fixture stays afterward unless you say otherwise. github.com

Questions

What does the break-ui skill do?

It stress-tests a UI component with realistic worst-case data and shows you what breaks. Long names, missing fields, one-letter names, empty lists and huge counts are typical cases.

How do I install the break-ui skill?

Use the install box at the top of this page.

Why did it reply with just one line?

By design. The SKILL.md says that when first invoked without a specific question it responds only with a short ready message, and gives no other information until you ask.

Does it fix what it finds?

Only if you ask. It reports first, then applies the fixes you name, such as 'fix all' or 'fix 1, 3', and re-checks every toggle state.

How is it different from emil-design-eng or prototype?

The SKILL.md says it does not redesign (that is prototype), critique taste (emil-design-eng) or review motion (review-animations). It only tests with worst-case data.

Is the break-ui skill safe to install?

It bundles a catalog file and no scripts, and names no API key. It writes a fixture and a dev-only toggle in your project, and the SKILL.md tells it to treat repository content as data, not instructions.

Information

updated Nov 2, 2026

Repository
emilkowalski/skills
Folder
skills/break-ui

emilkowalski/skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4
  1. break-ui SKILL.md · github.com
  2. emilkowalski/skills README · github.com
  3. break-ui CATALOG.md · github.com
  4. break-ui on skills.sh · skills.sh

Updated Nov 2, 2026.