Break it before your users do. Then make it hold.
Mockups get perfect content. Production gets a 60-character name, a German translation, a missing photo and someone with their text at 200%. The skill does all of that to the component in the real page, measures what broke, outlines it, and fixes the CSS at the cause.
npx skills add c0le0ni/skills --skill coleoni-break
Built to the mockup. Broken by the menu.
The bakery’s product cards, built the way they get built on a deadline: every size fixed to the design. 9 of 14 scenarios broke. After the fixes the skill suggested, none did.
.card { width: 300px; height: 372px;
overflow: hidden }
.name { white-space: nowrap;
overflow: hidden; width: 190px }
.price { position: absolute; top: 240px }
.menu { grid-template-columns:
repeat(3, 300px) }
font-size: 16px /* px everywhere */
$ /coleoni-break menu.html #menu
9 of 14 scenarios break
Fourteen things real content does.
Each one runs on a fresh load of the real page, against the component as it is, so a problem that was already there is counted once.
| Scenario | What it does |
|---|---|
| Text 3× longer | A long name, a long title, a real review |
| A word that won’t wrap | A 42-letter word: URLs, emails, German |
| No text | Missing data, a field nobody filled |
| Translated | Accents everywhere and 40% more words |
| Huge numbers | Every number becomes 1,234,567.89 |
| Accents and emoji | “Zoë Ñúñez-O’Brien 🎂”, the name your form will meet |
| Images fail | Every image and background broken |
| 1 and 25 items | The list inside the component, nearly empty and full |
| Right to left | Arabic, Hebrew |
| 320px | The smallest phone, or 400% zoom |
| Text at 200% | The browser’s font size doubled; text in px is flagged |
| High contrast, dark mode | Windows forced colors; the system in dark |
Break, measure, fix, break again.
A screenshot of every case would be a lot to look at. The skill measures first, so the sheet shows where to look.
-
Finds the component
In the running app, a Storybook story or a page. One selector, the narrower the better.
-
Breaks it 14 ways
Changes the real DOM of the real page: same fonts, same CSS, same neighbors.
-
Measures what broke
Clipped text, texts on top of each other, content leaving the component, sideways scroll, text in px.
-
Outlines and crops
Every problem outlined in red, every scenario cropped, all on one sheet.
-
Judges what is real
A 60-letter product name is real. A 42-letter price is not, and it says so.
-
Fixes, if you ask
At the cause: fixed sizes, nowrap, absolute badges, fixed grids, px. Then runs again.
One command, any agent.
The only package is playwright-core, installed by the agent on first use. It drives the Chrome or Edge you already have.
npx skills add c0le0ni/skills --skill coleoni-break
/coleoni-break http://localhost:5173/menu .product-card
-g-a claude-code-a codexnpx skills add c0le0ni/skillsAny component that holds content.
It shows the sheet first. Code changes only when you say so.
Break a card in the running app.
/coleoni-break http://localhost:5173/menu .product-card
A component in Storybook, and fix it.
/coleoni-break the Card story, fix what breaks
Only the scenarios that matter here.
/coleoni-break checkout summary, translation and 320px only
The engine, from the terminal.
scripts/break.mjs runs on its own too: node break.mjs page.html --select ".card" --out break-report.
| Option | What it does |
|---|---|
--select ".card" | The component to break |
--scenarios a,b | Only some scenarios: long, word, narrow… |
--width 1280 | Desktop width; the narrow scenario is always 320 |
--lang en|pt | Language of the sheet |
Real content is coming. Let it come.
npx skills add c0le0ni/skills --skill coleoni-break