web-design-reviewer

Detect and fix visual design issues in web applications via browser automation.

Updated Aug 23, 2026

Search Tags:#accessibility #css #playwright #web-design #layout-fixes #visual-inspection #responsive-testing

Ready to run

npx skills add https://github.com/AnXueHua/auto-research --skill web-design-reviewer-anxuehua

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/AnXueHua/auto-research/tree/main/skills/web-design-reviewer
Command: npx skills add https://github.com/AnXueHua/auto-research --skill web-design-reviewer-anxuehua

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured workflow to discover, diagnose, and remediate visual, responsive, and accessibility defects in web applications so teams can ship consistent, usable interfaces.

Core Features & Use Cases

Visual inspection and traversal: Navigate pages, capture screenshots, and retrieve DOM snapshots to locate layout breakage and overflow.
Issue detection and prioritization: Identify layout, responsive, accessibility, and visual-consistency problems and rank them by severity.
Source-level fixes: Detect styling method and framework, locate source files, and apply minimal, framework-appropriate code changes with re-verification.
Use Case: Run a review against a local dev server to find mobile breakpoints, fix CSS or component styles, and compare before/after screenshots.

Quick Start

Review http://localhost:3000 for layout, responsive, and accessibility issues and propose minimal source-code fixes and verification steps.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema

How do I find and fix responsive layout issues in my web application?▼

To find responsive layout issues, browser automation navigates pages, captures screenshots, and retrieves DOM snapshots to locate overflow or breakage, then applies minimal source-code fixes and re-verifies changes. This workflow identifies visual defects and prioritizes them by severity.

Can I use Playwright to detect accessibility and visual consistency problems on a running site?▼

Playwright enables browser automation for visual inspection of a reachable running site, capturing screenshots and retrieving DOM snapshots to detect accessibility and visual-consistency problems. Issues are identified and ranked by severity for structured remediation.

Does this visual inspection workflow support single page applications and full-stack frameworks?▼

Visual inspection and source-level fixes apply to static sites, SPAs like React, Vue, Angular, and Svelte, and full-stack frameworks including Next.js, Nuxt, and SvelteKit. It detects styling methods to apply framework-appropriate code changes during local development or staging.

What is the best way to review a localhost development server for CSS and design defects?▼

Running a visual inspection workflow against a localhost dev server captures screenshots, identifies mobile breakpoints and CSS issues, proposes minimal source-code fixes, and compares before and after screenshots for verification. It requires source-code access when applying fixes.

Do I need source-code access to apply layout fixes during a web design review?▼

Source-code access is required when applying fixes during a web design review. The process locates source files, detects the styling method and framework, and applies minimal, framework-appropriate code changes with re-verification, whereas read-only reviews only require a reachable running site.