Guide · Agent skill
How to use the Break Component Stress Test agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The break skill is an agent skill that takes one UI component you choose and renders it under the realistic edge cases that could reach it, such as very long text, zero items or a narrow container. It places those cases on a temporary page in your app, opens that page once in a browser, and reports what visibly broke. This guide explains what the skill does, how to install it, how to trigger it and what to check before running it.
Break Component Stress Testjakubkrehel/skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the break skill ZIP from this page and unzip it. It contains agents/openai.yaml, scenarios.md and SKILL.md.
- 2Place the skill folder. Unzip into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings → Capabilities → Skills.
- 3Confirm the requirements. Make sure your project has an importable component, a framework with a scratch route such as Next.js, and a browser the agent can open.
- 4Name one component. Ask for the break skill and name a single component, such as a form input or a card.
- 5Review the scenarios. The agent lists the scenarios it kept and the axes it dropped, so you can catch a wrong inference early.
- 6Read the findings. Check the report table and the marked harness page. Broken scenarios are listed first.
- 7Delete the harness when finished. Ask the agent to remove the scratch route and fixtures once you have finished reviewing.
What the break skill makes the agent do
When you ask the agent to stress test a component, it builds a temporary scratch page in your app. That page shows the one component repeatedly, once for each scenario it could face in production, in a single scrollable column with a short label above each instance.
The agent then loads the page in a browser, looks at it once, and reports what visibly broke. Each finding is named in the vocabulary of the skill that would fix it, such as better-typography or better-writing. The skill observes rather than judges: it does not issue design verdicts and does not change your code unless you ask it to.
- Scopes one component per run; a whole settings page is not a component.
- Keeps only the scenario types that match what the component accepts, such as text length, states or container width.
- Imports the real component from your project rather than a copy.
- Leaves the page running so you can look at it yourself.
Install the break skill
Download the ZIP from the skill's page in this directory and unzip it. The skill folder contains agents/openai.yaml, scenarios.md and SKILL.md.
For a personal install, unzip it into ~/.claude/skills/. To limit it to one project, unzip it into that project's .claude/skills/ folder.
In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project
- Claude apps: Settings → Capabilities → Skills, then upload
Check what you need before running it
The skill needs a project with a component you can import, in a framework that supports a scratch route; the source's example is Next.js. It also needs a browser the agent can open to view the page.
Companion skills named in the report are referenced for fixes but are not required to run this one: interface-review, better-interface, variant, state-machine, better-typography and better-writing.
- A component you can import from the project
- A framework with a scratch route, for example Next.js
- A browser the agent can open
- Companion skills are optional for running, needed for applying fixes
Trigger the skill with a natural request
The skill is set so it is not invoked automatically (disable-model-invocation: true in SKILL.md), so ask for it directly and name the component. Name one component at a time; if your request covers several, the agent will list the candidates and ask which to test.
Good requests say what to test and, optionally, which states or content matter.
- Stress test the ProfileForm text input under long text and empty values.
- Use the break skill on the PriceBadge component.
- Break the Card component and show me what happens with narrow containers.
- Run the break skill on the SearchField component, not the whole search page.
Read the report and the harness page
The report is a table with three columns: the scenario, what was observed and the owner skill for the fix. Broken scenarios appear first. The harness page itself is also part of the report, with each break marked under its scenario label.
If the agent could not open a browser, it gives you only the URL and the scenario list, with no findings. Open the URL yourself and check it. If every scenario survives, the report says so and lists the scenarios on the page.
- Scenario: the edge case rendered.
- Observed: the visible break, such as text overflowing a card.
- Owner: the skill that owns the fix, such as better-typography.
Safety notes: scripts and network
The skill runs scripts, so review what the agent runs in your project before you approve it. It does not use the network. The harness is meant to use fixture data and must not connect to live data sources or import production state.
The temporary page stays up after the run until you say you are done with it. Ask the agent to delete the page and its fixtures then, and it will search for the route and fixture names and check that the diff leaves nothing behind.
- Runs scripts: yes. Review them before approving.
- Uses network: no.
- Use fixture data only; do not point the harness at production data.
- Delete the page and fixtures only when you ask.
What people use it for
- Checking that a reusable button keeps its label readable with one unbreakable 60-character string.
- Confirming a list or dropdown shows a sensible message when it has zero items.
- Seeing whether a card or badge survives a very narrow container.
- Giving a reviewer one scrollable page that shows a component under many edge cases before a release.
Frequently asked questions
How do I install the break agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can upload the ZIP under Settings → Capabilities → Skills.
What does the break skill need to run?
It needs a project with a component you can import, a framework with a scratch route (the source's example is Next.js), and a browser the agent can open. Companion skills are referenced for fixes but are not required to run it.
Is the break skill free?
The skill is published under the MIT licence. This page does not state pricing for it, so check the repository for the licence terms.
Does break change my code?
No. It builds a temporary harness page and reports findings. It only fixes something when you ask it to, and then it follows the owner skill's rules and re-renders the failing scenarios.
Why does the skill not run against production data?
The harness is meant to use fixture data and must not connect to live data sources. Feeding it production state or wiring it to live data goes against how the skill is designed.
Can break judge whether my design looks good?
No. It reports only what visibly broke on the page and does not issue verdicts on taste or design quality. For reviewing code against a standard, the source points to interface-review and better-interface.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the break skill if you are a frontend developer or reviewer who wants to see a reusable component under worst-case content, empty data and odd containers before shipping. Pick something else if you need design critique, or if your agent cannot open a browser, since then you only get a URL and a scenario list.
Download the skill