browser-validator

Automate browser-based UI validation with Chrome DevTools MCP and generate QA reports.

16|4|Updated Oct 13, 2025

Search Tags:#accessibility #a11y #validation #qa #reporting #chrome-devtools #browsers

Ready to run

npx skills add https://github.com/kanopi/cms-cultivator --skill browser-validator

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: browser-validator
Source: https://github.com/kanopi/cms-cultivator/tree/main/skills/browser-validator
Command: npx skills add https://github.com/kanopi/cms-cultivator --skill browser-validator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automated browser-based validation of UI implementations to catch issues that only appear in real environments, ensuring components render correctly across devices and assistive tech.

Core Features & Use Cases

Real-browser validation with Chrome DevTools MCP to test responsive breakpoints (320px, 768px, 1024px), accessibility, and interactions.
Automated report generation detailing failing selectors, breakpoints, and recommended fixes for issues found during validation.
Use Case: After implementing a UI component, trigger browser-based validation to produce a detailed QA report before submission for review.

Quick Start

Run a browser validation on the current component and generate a detailed QA report.

Frequently Asked Questions about browser-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate browser validation for UI components to catch responsive and accessibility issues?▼

Automate browser validation by running UI implementations through real-browser checks at 320px, 768px, and 1024px breakpoints, which identifies responsive rendering and accessibility issues before code submission.

What is the best way to generate a QA report for failing UI selectors and accessibility checks?▼

Generating a QA report involves running automated browser validation that details failing selectors, affected breakpoints, and recommended fixes into a pipeline-friendly output for design-to-code verification.

Does Chrome DevTools work with automated accessibility validation for local and staging URLs?▼

Chrome DevTools integration supports automated accessibility validation by testing interactions and rendering directly in real browsers across local and staging URLs to catch environment-specific issues.

Can I test responsive breakpoints at 320px, 768px, and 1024px in an automated QA workflow?▼

You can test responsive breakpoints at 320px, 768px, and 1024px within an automated QA workflow to verify component rendering across devices and ensure components render correctly before review.

When do I need real-browser validation instead of standard component rendering checks?▼

Real-browser validation is needed when standard rendering checks cannot catch issues that only appear in real environments, ensuring components render correctly across devices and assistive tech.