hoangnguyen0403/common-web-visual-testing
skills/common/common-web-visual-testing/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard common-web-visual-testingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 15, 2026, 3:32 AM329.8s6 files scanned
SKILL.md
- name:
- common-web-visual-testing
- description:
- 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:
- Baseline (Before): Capture
snapshot --aria+screenshotprod/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
--maskor JS (opacity: 0). Avoid "False Regression". - Blind Assertion: Use
playwright-cli snapshot --ariaverify 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
Related Skills
hoangnguyen0403/common-operator-profile
testing
VerifiedTrustedCommunity
Infer the requesting operator's technical fluency from message content (never ask directly) and adapt register — business, hybrid, or technical — across SDLC workflow output. Use when starting sdlc, brainstorm-feature, plan-feature, verify-work, publish-notes, or session-report, or whenever a request's phrasing signals a non-technical or cross-stack operator.
524SKILL.mdUpdated Jul 12, 2026
hoangnguyen0403/database-transactions
documentation
VerifiedTrustedCommunity
Define transaction boundaries, locking, and consistency guarantees for multi-step writes. Use when designing atomic operations, retries, idempotency, or concurrent write behavior.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-schema-design
development
VerifiedTrustedCommunity
Design relational or document schemas from access patterns, cardinality, and lifecycle. Use when modeling entities, choosing embed vs normalize, or shaping schema boundaries before implementation.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-query-performance
data-ai
VerifiedTrustedCommunity
Diagnose database latency with explain plans, index ownership, and query-shape review. Use when a query is slow, an index is missing, or scans and N+1 patterns appear.
524SKILL.mdUpdated Jun 19, 2026