web-design-reviewer

Automate visual inspection of websites to identify and fix design issues.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/lzc0901/vibe_coding_template --skill web-design-reviewer-lzc0901
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/lzc0901/vibe_coding_template/tree/main/skills/design-visualization/web-design-reviewer
Command: npx skills add https://github.com/lzc0901/vibe_coding_template --skill web-design-reviewer-lzc0901

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables automated visual inspection of websites to identify and fix design issues such as responsiveness, accessibility, and visual consistency, reducing manual QA time.

Core Features & Use Cases

  • Automated visual validation across breakpoints to ensure responsive layouts
  • Accessibility checks for color contrast, focus states, and semantic structure
  • Visual consistency verification against branding and UI patterns
  • Use Case: Run on a locally hosted site to detect layout breakage and propose CSS fixes

Quick Start

  1. Start your local site (e.g., http://localhost:3000) and run the web-design-reviewer to analyze the current UI.
  2. Review the report of detected issues and apply suggested fixes in your source code.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I automate visual inspection for responsive design and accessibility issues on my staging site?

Automated visual inspection captures screenshots and retrieves the DOM across breakpoints to identify responsive design and accessibility issues on staging sites, generating a report of detected layout and semantic structure problems for CSS fixes.

Can I run an automated web design review on a locally hosted SPA?

Yes, automated web design review works with SPA frameworks running locally, using browser automation to navigate the local site, capture screenshots, and verify visual consistency against UI patterns.

How do I fix color contrast and focus state issues detected during a visual audit?

To fix color contrast and focus state issues detected during a visual audit, review the generated report of accessibility checks and apply the suggested CSS fixes directly within your project workspace source code.

Does automated QA for web design work with static sites in production?

Automated QA for web design works with static sites in production by using browser automation to perform navigation, capture screenshots, and execute visual consistency checks across various breakpoints.

What is the best way to check visual consistency against branding across multiple breakpoints?

The best way to check visual consistency against branding across multiple breakpoints is using automated visual validation, which captures screenshots at different viewport sizes and flags layout breakage.

Why does my responsive layout break on mobile breakpoints and how can I find the CSS cause?

Responsive layouts break on mobile breakpoints due to CSS constraints, which you can identify by running an automated visual inspection that retrieves the DOM and proposes targeted CSS fixes for the detected layout breakage.