web-validation_skill

This skill validates web apps with authentication, mobile and multi-viewport testing, and automated error detection to accelerate debugging and release

Python

15

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill bejranonda/llm-autonomous-agent-plugin-for-claude --skill web-validation

SKILL.md19.4 KB

Overview

This skill performs comprehensive automated validation of web pages with built-in authentication, multi-viewport screenshots, mobile testing, and advanced error detection. It helps teams find JavaScript errors, network failures, React hydration mismatches, and performance regressions before they reach users. Results include categorized error reports, screenshots for visual evidence, and optional CI-friendly JSON output.

How this skill works

The validator runs headless browser sessions (Playwright/Selenium/CDP) to load pages, capture console logs, network events, and performance timings. It supports form-based authentication and multi-page login flows so protected pages can be validated in a single session. When configured, it captures screenshots across device presets, detects React hydration errors (#185), and classifies issues into error categories for reporting and remediation.

When to use it

Pre-deployment testing of dashboards and web apps
CI/CD validation for protected pages requiring login
Detecting and classifying JavaScript syntax/runtime errors
Collecting screenshots for bug reports and visual regressions
Mobile-first and responsive testing across device presets

Best practices

Configure authentication with environment variables for CI secrets management
Run full-viewport sweeps (desktop, tablet, mobile) on release branches
Enable capture_on_error screenshots to preserve visual context for failures
Integrate JSON output into CI pipelines and fail builds on critical errors
Prioritize REACT_HYDRATION and NETWORK_FAILURE categories for immediate fixes

Example use cases

Validate a signed-in dashboard after deployment to ensure no console errors and all resources load
Run scheduled checks that capture screenshots and performance metrics for page health monitoring
Detect React hydration mismatches and surface the exact console messages and visible error boundaries
Use CLI or Python API in CI to block merges when critical console errors or network failures are detected
Collect multi-viewport screenshots to confirm responsive layout and mobile-first behavior

FAQ

Provide a form-based AuthConfig with selectors and credentials or set TEST_EMAIL/TEST_PASSWORD environment variables. The validator can authenticate and then validate protected pages in the same browser session.

Can I capture screenshots only on failures?

Yes. ScreenshotConfig supports capture_on_error so only failing validations produce images, reducing storage and noise.

Which error types are prioritized?

The validator categorizes and prioritizes REACT_HYDRATION, NETWORK_FAILURE, JAVASCRIPT_SYNTAX, JAVASCRIPT_RUNTIME, and UNCAUGHT_EXCEPTION for triage.

How do I include this in CI?

Use the CLI or Python API to produce JSON output and exit non-zero on critical errors. Store credentials as environment variables and run headless in CI agents.