skills.rest
kanopi
kanopiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/kanopi/cms-cultivator --skill browser-validator
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Avila-TekAvila-Tek

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP in real browsers.

Official
Intermediate
ChenyCHENYUChenyCHENYU
3

style-align

Detect and fix UI style inconsistencies in Vue single-file components.

Community
Intermediate
KrishnatejavepaKrishnatejavepa
14

browser-testing-with-devtools

Inspect DOM, console, network, and performance via Chrome DevTools MCP.

Community
Advanced
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced