Skip to content
Get packs

Break Component Stress Test

Renders one UI component under every realistic worst-case scenario on a temporary page and reports what visibly breaks.

Source Download skill
Repository
jakubkrehel/skills
Stars
10,236
Licence
MIT
Files
3 files

What it does

When you ask the agent to stress test a UI component, it builds a temporary scratch page in your app that shows that one component repeatedly, once for each realistic edge case it could face, such as very long text, zero items, or a narrow container. It then loads the page in a browser, looks at it once, and reports the things that visibly broke, pointing to the other skill that would fix each problem. It does not change your code unless you ask it to.

Great for

  • Frontend developers checking that a reusable component survives long text, empty data or odd containers before shipping
  • Designers or reviewers who want a single scrollable page showing a component under many edge cases

Skip it if

  • Judging overall design quality or taste, since the skill explicitly reports only visible breakage, not verdicts (it is not a design critique tool)
  • Projects where the agent cannot open a browser: it will only hand over a URL and a scenario list, with no findings
  • Running against production data: the harness is meant to use fixture data and must not connect to live data sources

Try asking

  • “Stress test the profile form's text input with long names, empty values and emoji”
  • “Break my product card component under every scenario that could reach it”
  • “Render the pricing badge under worst-case content and tell me what overflows”
Step-by-step guide: how to use Break Component Stress TestInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    break.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip break.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip break.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name one specific component rather than a whole page, since the skill asks you to scope a single component per run
  • Keep the temporary page running while you review the report, and tell the agent when you are done so it can clean up the route and fixtures

What's inside

  • agents/openai.yaml
  • scenarios.md
  • SKILL.md

Redistributed unmodified from jakubkrehel/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.