Common Web Visual Testing

hoangnguyen0403/common-web-visual-testing

Standardizes visual audits, responsive design, and behavioral testing for web apps. Use to verify a web UI fix or cross-browser behavior; defer backend API refactors, Playwright installation/tooling setup, and Appium/mobile automation.

5k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

536

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/HoangNguyen0403/agent-skills-standard --skill common-web-visual-testing

What comes with it

16 266 bytes besides the instruction

references/diagnostic-decoder.md

references/dom-snapshot-vs-screenshot.md

references/login-and-test-data.md

references/scenarios.md

The instruction itself

6 sections, as written by the author

🌐 Web Visual & Behavioral Testing

Priority: P1 (HIGH)

> [!IMPORTANT]

> Tier 2 (Methodology): Strategy web UI/UX audit.

> Tier 3 (Domain): Responsive, A11y (WCAG), Browser Engine quirk.

🧪 Testing Mindset (Comparative Audit)

Visual test best as Comparative Audit loop:

Baseline (Before): Capture snapshot --aria + screenshot prod/main.
Implementation (After): Capture same local/feature.
Audit: Compare state for regression, CLS, Aria drift.

Responses must label the two captures as Before and After (or Baseline and Fixed) and include the diff and neighboring-element side-effect check.

📋 Scenario Matrix

| Change Type | Scenarios to Run |

| :---------------- | :------------------------------------------------- |

| CSS/Layout | Responsive Audit + Hover + CLS Check |

| Forms/Input | Validation Msg + Focus State + Error Boundary |

| Navigation | URL Sync + Sticky Header + Back-Button Persistence |

| Assets/Fonts | Lazy Load + Icon Check + LCP Audit |

| Accessibility | Tab Order + Aria-Snapshot + Color Contrast |

🚫 Anti-Patterns

Single-Viewport: Never verify Desktop only. Check Mobile (375px) + Tablet (768px).
Ignore Layout Shift: Check loading state (skeleton) → no page jump.
Unmasked Dynamic: MUST mask timestamp/balance via --mask or JS (opacity: 0). Avoid "False Regression".
Blind Assertion: Use playwright-cli snapshot --aria verify state before done.
External Dependency: Mock/bypass 3rd-party (Chat, Analytics) → prevent flakiness.

🔗 References

playwright-cli: playwright-cli
Diagnostic Decoder: diagnostic-decoder
DOM vs Screenshot: dom-snapshot-vs-screenshot
Login & Data: login-and-test-data
Scenario Details: scenarios

How to use it

Copy the folder

Take hoangnguyen0403/common-web-visual-testing from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.