Renders one UI component under hostile content scenarios and reports visible breaks.
npx skills add https://github.com/AO-HyS/aohys.com --skill break-ao-hys
Please help me install this Agent Skill. Skill: break Source: https://github.com/AO-HyS/aohys.com/tree/main/.agents/skills/break Command: npx skills add https://github.com/AO-HyS/aohys.com --skill break-ao-hys
High-intent search queries and answers about installing and using this skill.
Render the real component on a throwaway page once per scenario: empty strings, unbreakable long strings, RTL text, zero items, and narrow containers. Import the component unchanged from the project so the app's own layout, fonts, and tokens apply.
Test only the axes matching the component's props: content length and shape for text it does not author, quantity for repeating lists, container widths for everything, and loading, error, and disabled states where they exist as props.
Yes, but the harness page itself must be client code with the "use client" directive. Fixture props can silently vanish crossing the server-client boundary into an interactive component, leaving every scenario rendered empty.
Empty scenarios usually mean the harness is broken, not the component. The most common cause is fixture props failing to cross the server-client boundary in Next.js; make the page client code and re-check.
Skip it when reviewing code against a design standard, which belongs to code review, or when exploring design alternatives. Stress testing only observes what visibly breaks under worst-case content, not how the component looks in context.
aziontechCreate standardized Storybook stories for Vue components with autodocs and build validation.
jakubkrehelRenders a component under hostile content scenarios and reports visible breaks.
hschneCritique web interfaces against design briefs and WCAG standards.
Camilo8902Automate visual regression testing with Playwright and Chromatic screenshot comparisons.
