mcpbeat Sign in

Common Web Visual Testing Agent Skill

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
5
files
instructions only
0
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

Other skills for the same job

different authors, same section of the catalogue
Webapp Testing
by anthropics
vendor ×12

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

6k tokens scripts
Finishing A Development Branch
by ZhanlinCui
×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

1k tokens
Test Driven Development
by w95
×7

Use when implementing any feature or bugfix, before writing implementation code

2k tokens
Systematic Debugging
by ratacat
×7

Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

10k tokens scripts
Verification Before Completion
by ZhanlinCui
×6

Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always

1k tokens
Backtest Expert
by BaggaT236
×3

Expert guidance for systematic backtesting of trading strategies. Use when developing, testing, stress-testing, or validating quantitative trading strategies. Covers "beating ideas to death" methodology, parameter robustness testing, slippage modeling, bias prevention, and interpreting backtest results. Applicable when user asks about backtesting, strategy validation, robustness testing, avoiding overfitting, or systematic trading development.

15k tokens scripts
Adaptyv
by christophacham
×3

Cloud laboratory platform for automated protein testing and validation. Use when designing proteins and needing experimental validation including binding assays, expression testing, thermostability measurements, enzyme activity assays, or protein sequence optimization. Also use for submitting experiments via API, tracking experiment status, downloading results, optimizing protein sequences for better expression using computational tools (NetSolP, SoluProt, SolubleMPNN, ESM), or managing protein design workflows with wet-lab validation.

16k tokens
Aeon
by christophacham
×3

This skill should be used for time series machine learning tasks including classification, regression, clustering, forecasting, anomaly detection, segmentation, and similarity search. Use when working with temporal data, sequential patterns, or time-indexed observations requiring specialized algorithms beyond standard ML approaches. Particularly suited for univariate and multivariate time series analysis with scikit-learn compatible APIs.

19k tokens

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.