break Skill for Claude Code: Render One Component Under Worst-Case Scenarios

break makes Claude render one UI component under every scenario that can reach it on a temporary page, then report what visibly broke.

Installs: 15.6K; on skills.sh
Stars: 10K; on GitHub
Files: 2; besides SKILL.md
Updated: Oct 2026; last repo commit

break is a user-invoked skill from Jakub Krehel's skills repo. Claude reads one component, picks the scenarios that apply to it, builds a scratch page that renders the real component once per scenario, and looks at the page once.

The scenarios come from six axes in scenarios.md: content length, content shape, quantity, container, state and environment. Claude keeps only the axes that match the component. It reports a table of what broke and which skill owns the fix, such as better-typography or better-layout.

The page is half the report. The skill leaves it up and deletes it only when you say you are done.

Good for

Frontend developers who want to see a component with worst-case content before shipping
Design engineers checking overflow, empty states and narrow containers
Reviewers who want findings tied to what is visible on a page

Install break

Claude Code

Copy this prompt.

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

npx skills add jakubkrehel/skills --skill break

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

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

Requires Node.js.

break is one of 14 skills in jakubkrehel/skills. The plugin route installs all 14 and its manifest lists no hooks or MCP servers. Pick one route, not both. The skill is user-invoked: type /break yourself.

From the vendor's docs. Source.

What's in the skill

When it loads

Renders a component you choose under every scenario that can reach it on a temporary page and stress tests it.

Sections in SKILL.md

1. Scope one component
2. Infer the scenarios from the component
3. Build the harness page
4. Look once
5. Report what broke and stop
6. Leave the page up, delete it on request
Before you finish

Key facts

License (per GitHub): MIT
Author: jakubkrehel (repo owner)
Repository: jakubkrehel/skills, folder skills/break
Installs on skills.sh: 15,573 as of 2026-11-02
Repo stars: 10,003 as of 2026-11-02 (whole repo)
Last repo commit: 2026-10-25
Files in the skill folder: 3 files including SKILL.md
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass

What it includes

Pick one component and restate what it does
If you name several, Claude lists candidates and asks which to test.
1. Scope one component
Keep only the axes that apply to the component
Walks scenarios.md, writes the kept scenarios one per line and says which axes it dropped and why.
2. Infer the scenarios
A scratch route that imports the real component
Adds a temporary route inside your app, so the component keeps your layout, fonts and styles, with a label and fixture props per scenario.
Write · 3. Build the harness page
Load the page once and note what visibly broke
Uses a browser already at hand. With none, it hands you the URL and skips the findings table.
Runs code · 4. Look once
A table of scenario, observed break and owner skill
Broken scenarios first. The skill gives no verdict, and "everything survived" is a complete report.
5. Report what broke
Delete the harness only on your word
When you are done, Claude deletes the route and fixtures and checks the diff for leftovers.
Delete · 6. Leave the page up
Six axes of scenarios with cues
Content length, content shape, quantity, container, state and environment, each with a cue that says when the axis applies.
scenarios.md

From the official docs

Permissions

Low risk

The skill adds a scratch route and fixture files to your project and leaves them there until you say you are done. Check your git status before you commit.

What it can do

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

Watch out for

It adds a temporary page and fixtures to your project
Claude creates a scratch route and fixture data. Check git status before you commit so none of it ships.
Cleanup happens only when you ask
The page stays up until you say you are done. Then Claude deletes the route and fixtures and checks the diff.

Technical details

Scopes	Your project files: a scratch route and fixtures

Questions

What does the break skill do?

It makes Claude test one UI component against worst-case input. Claude renders it under long text, empty data, many items, narrow containers and loading or error states, then reports what visibly broke.

How do I use it?

Install it with the install box above and invoke it yourself, since its frontmatter turns off automatic use. Name one component, not a whole page.

Will it change my code?

It adds a temporary scratch route and fixtures to your project, and it imports your real component without changing it. It fixes nothing unless you ask, and it deletes the page and fixtures only when you say you are done.

Does it need a browser?

It uses a browser already at hand to look once. If none is available, it says so and hands you the URL to check yourself.

Do I need the other skills in the repo?

The report names the skill that owns each fix, such as better-typography, better-layout or better-accessibility. They live in the same jakubkrehel/skills repo. The SKILL.md does not list them as requirements.

Is it safe?

Its changes are a temporary route and fixture files in your project. Look at the diff before you commit, and ask Claude to delete the harness when you finish. The SKILL.md names no API key and the folder bundles no scripts.

Information

updated Nov 2, 2026

Repository: jakubkrehel/skills
Folder: skills/break

jakubkrehel/skills skills.sh

Sources

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

Show all 5

jakubkrehel/skills README · github.com
skills CLI commands · github.com
plugin.json · github.com
break SKILL.md · github.com
scenarios.md · github.com