How do I install the Common Web Visual Testing skill?

Run npx skillmds@latest add hoangnguyen0403/common-web-visual-testing-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Common Web Visual Testing safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Common Web Visual Testing?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Common Web Visual Testing free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Common Web Visual Testing?

HoangNguyen0403 (@hoangnguyen0403) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Common Web Visual Testing by hoangnguyen0403

Name: Common Web Visual Testing
Author: 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.

HoangNguyen0403 Updated Sep 21, 2026 542 repo stars

File contents

🌐 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 (CLI) or browser_snapshot (Playwright MCP) verify state before done.

📁 Evidence

Before/After pairs live in .playwright-cli/<session>/ as <AC|step>-before.png / <AC|step>-after.png plus matching .aria.txt. Driver rung and dir go in the walkthrough driver: / evidence_dir: lines.

External Dependency: Mock/bypass 3rd-party (Chat, Analytics) → prevent flakiness.

🔗 References

playwright-cli: playwright-cli
Driver Ladder: driver-ladder — CLI first, Playwright MCP fallback, BLOCKED rule.
Diagnostic Decoder: diagnostic-decoder
DOM vs Screenshot: dom-snapshot-vs-screenshot
Login & Data: login-and-test-data
Scenario Details: scenarios

---name: common-web-visual-testing-2description: 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.---# 🌐 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:1. **Baseline (Before)**: Capture `snapshot --aria` + `screenshot` prod/main.2. **Implementation (After)**: Capture same local/feature.3. **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` (CLI) or `browser_snapshot` (Playwright MCP) verify state before done.## 📁 EvidenceBefore/After pairs live in `.playwright-cli/<session>/` as `<AC|step>-before.png` / `<AC|step>-after.png` plus matching `.aria.txt`. Driver rung and dir go in the walkthrough `driver:` / `evidence_dir:` lines.- **External Dependency**: Mock/bypass 3rd-party (Chat, Analytics) → prevent flakiness.## 🔗 References- **playwright-cli**: [playwright-cli](../../quality-engineering/quality-engineering-playwright-cli/SKILL.md)- **Driver Ladder**: [driver-ladder](../../quality-engineering/quality-engineering-playwright-cli/references/driver-ladder.md) — CLI first, Playwright MCP fallback, BLOCKED rule.- **Diagnostic Decoder**: [diagnostic-decoder](references/diagnostic-decoder.md)- **DOM vs Screenshot**: [dom-snapshot-vs-screenshot](references/dom-snapshot-vs-screenshot.md)- **Login & Data**: [login-and-test-data](references/login-and-test-data.md)- **Scenario Details**: [scenarios](references/scenarios.md)

Frequently asked questions