skills.rest
AnXueHua
AnXueHuaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/AnXueHua/auto-research --skill web-design-reviewer-anxuehua
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
angryconsultantangryconsultant

web-design-reviewer

Audit running websites for accessibility, responsive behavior, and visual consistency.

Community
Intermediate
imonmiimonmi

design-review

Audit live sites for visual issues and fix them with atomic commits.

Community
Advanced
anouar1991anouar1991
1

responsive-design-tester

Audit web pages across six viewports for responsive design issues.

Community
Advanced
shawn-sandyshawn-sandy

wcag-compliance-reviewer

Identify WCAG 2.1 AA accessibility violations in HTML/CSS and React/TypeScript code.

Community
Intermediate