Responsive ui qa

Skill divyanshu-iitian/agent-website-design-skills/responsive-ui-qa

Verification-first AI agent skills for website design, landing pages, responsive UI QA, accessibility, and ethical conversion.

Install

npx -y skills add divyanshu-iitian/agent-website-design-skills --skill responsive-ui-qa

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Inspect, diagnose, fix, and verify responsive frontend defects across routes, states, containers, and input modes. Use for mobile or desktop QA, overflow, overlap, broken navigation, unstable grids, clipped text, blank media, viewport regressions, screenshot comparison, and post-implementation visual verification.

SKILL.md

3.0 KB, as published. Nobody here has run it

Responsive UI QA

Find root causes, not screenshot-specific patches. Produce evidence that the reported state works after the fix.

Workflow

Read the repository's run and testing instructions. Start the app with its normal command.
Build a compact test matrix:
- critical routes or components;
- default, loading, empty, error, long-content, and interactive states;
- narrow mobile, mobile, tablet or narrow container, desktop, and wide desktop as relevant.
Reproduce the exact reported defect before editing. Capture the viewport, route, state, and interaction.
Inspect layout mechanics: containing block, grid/flex constraints, intrinsic size, min-width, wrapping, positioning, stacking, overflow, and fixed/sticky offsets.
Classify severity:
- Blocker - action or content is inaccessible;
- Major - interaction or comprehension is materially impaired;
- Minor - visible polish defect without task failure.
Fix the underlying constraint with the smallest coherent change. Avoid viewport-specific offsets unless the design genuinely changes there.
Test content stress: long labels, unbroken strings, localization expansion, missing/large media, validation text, and dynamic lists.
Test input and preference modes: keyboard, touch-sized targets, focus visibility, zoom when feasible, and reduced motion.
Re-run the failed case plus adjacent widths and states. Check that no new horizontal scroll or hidden content was introduced.
Report evidence, remaining risks, and anything not testable locally.

Fix Rules

Prefer intrinsic layout, wrapping, minmax(), min-width: 0, max-width, aspect-ratio, and container-aware rules.
Change information architecture at breakpoints when reflow alone is insufficient.
Do not "fix" overflow by globally hiding it or shrinking text below readability.
Reserve fixed dimensions for controls and media with a real size contract.
Keep fixed or sticky UI from covering focused elements and anchored content.
Verify canvas, WebGL, video, charts, maps, and embeds by inspecting rendered pixels and resize behavior.
Preserve behavior at the exact state that triggered the bug.

Delivery Contract

Return:

Matrix tested - route/state/viewport/input.
Findings - severity, reproduction, and root cause.
Fixes - files changed and why the constraint is correct.
Evidence - before/after screenshots or explicit browser observations.
Residual risk - untested browsers, data states, or environments.

Reference

Read references/qa-checklist.md for the final cross-viewport and interaction pass.