break

Solid

Renders a component you choose in every state and scenario on a temporary page and stress tests it.

AI & Automation 422 stars 44 forks Updated today

Install

View on GitHub

Quality Score: 83/100

Stars 20%
87
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
0
Description 5%
100

Skill Content

# Break This skill takes one component and renders it on a fresh page under every scenario that can actually reach it. That page is the deliverable: a visual report the user scrolls through, every state side by side, with the breaks marked. A component built against one happy path looks finished right up until real content arrives. It observes rather than judges. A finding here is something that visibly broke on the page, named in the vocabulary of the domain skill that owns the fix. Reviewing code against a standard is `interface-review` and `better-interface`; exploring design alternatives is `variant`. Where `variant` insists on the real page, this skill isolates on purpose. You are not judging how the component looks in context. You are checking whether it defends itself when the content is worst-case. The whole run is build, look once, report: minutes, not a session. The work is rendering an existing component with different props, and nothing in it justifies instrumentation, browser debugging or a second pass. ## 1. Scope one component One component per run. "The settings page" is not a component; the profile form's text input is. Where the request spans several, list the candidates and ask which one to test, rather than picking on the user's behalf. Restate what the component is in one sentence: what it accepts, what it renders and where it will live. ## 2. Infer the scenarios from the component Stress only what varies. A scenario earns a slot when the compone...

Details

Author
aiskillstore
Repository
aiskillstore/marketplace
Created
8 months ago
Last Updated
today
Language
Python
License
None

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

breakdown

Lay out every case in a decision exhaustively before evaluating any of them, decompose the open problem into the individual decisions only the user can answer, then stop and wait — and synthesize a recommendation only after they answer. Use it when the user wants the full ground laid out before a conclusion: 「先把所有情況攤開給我看」, 「不要先給結論,先列出所有選項和事實」, 「幫我拆解這個決定」, "lay out every case first", "don't recommend yet — decompose it", "what are all the options here, in full". Each case carries what is verified fact versus what is inference, uniform depth across cases, and an explicit excluded list. Do NOT invoke when the user wants one clickable decision surfaced right now (that is options), when the answer is genuinely unknown to both sides and needs joint exploration (that is discuss-with-me), or for a question with a settled answer that just needs looking up.

1 Updated 2 days ago
leoluyi
Web & Frontend Listed

design-qa

Rigorous visual QA and polish pass over a component, a page, or a sweep across several. Renders the target in both themes, magnifies the details, judges the craft against a durable rubric and the rendered siblings, fixes the defects, and reports the taste calls. Use when asked to design-QA something, polish a component or page, judge whether something looks good enough, or find visual inconsistencies across components or pages.

0 Updated today
robritacca-dotcom
Code & Development Listed

debug-broken-ui

Find out why something in a running web app does not work, when the console is empty and the code looks correct. Reads the click, the request, the store and the console together and returns the file:line to open. Use when a button does nothing, a form will not submit, data will not load, a page renders blank or stale, a modal will not close, or the user says "it's broken" and the code review says it is fine.

466 Updated today
reticlehq