SKILL / responsive-visual-qa

Responsive visual QA

Find what breaks between screen sizes. Layouts, themes and states, with visual evidence for each finding.

Input: A URL or local project, plus the pages and journeys you want reviewed.
Output: A report with screenshots, reproduction steps, impact and comparisons after fixes.

GUIDED EXAMPLE / LAYOUT

It fits on desktop. What about mobile?

This fictional form starts with a minimum width that causes horizontal scrolling on small screens. Change the size and compare the fix.

390 × 340 CSS px · display scale 100%

EXAMPLE FINDING

Measuring…

—

Measured from the preview document. The defect was deliberately introduced; this is not a complete audit.

Reproduce it

Select 390px and Before. The second field extends beyond the visible area. In After, both fit without horizontal scrolling. Repeat at 320px and 768px.

What goes into the report

Route and state, viewport size, theme, a screenshot of the issue, its impact on form entry and a matching screenshot after the fix.

Use it in your project

Extract the ZIP and make the folder available to your SKILL.md-compatible agent. You can also provide the instruction file directly. The package includes references; inspection uses your environment’s browser and code tools.

Example prompt

Use $responsive-visual-qa to review this project on mobile, tablet and desktop in its supported themes. Record issues with screenshots and reproduction steps.

The demonstration on this page is local and illustrative. It does not audit external sites or establish accessibility conformance.