web-design-reviewer

Inspect websites visually and fix responsive, accessibility, and layout issues in source code.

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Shaarav4795/ScholarFlow --skill web-design-reviewer-shaarav4795
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/web-design-reviewer
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill web-design-reviewer-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visually inspect websites running locally or remotely to identify and fix design issues, enabling rapid detection of responsive, accessibility, and visual-consistency problems.

Core Features & Use Cases

  • Automates visual inspection across static sites and SPA frameworks (React, Vue, Angular) and full-stack apps in local, staging, or production environments.
  • Detects issues related to responsive design, accessibility, and visual consistency, and guides or performs fixes at the source-code level where possible.
  • Use Case: Review a local development site to uncover layout breaks and contrast problems, then apply targeted code changes to resolve them.

Quick Start

Start a visual review of the target site and report responsive, accessibility, and layout issues ready for code-level fixes.

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 a visual review of my website's responsive design and accessibility?

Automate a visual review of your website's responsive design and accessibility by using browser automation to inspect the DOM. This identifies visual inconsistencies and layout breaks, guiding source-code fixes for static sites and SPA frameworks.

Can I use automated DOM inspection to fix layout breaks in React or Vue SPAs?

Yes, automated DOM inspection fixes layout breaks in React or Vue SPAs by navigating pages running locally or in production. It detects responsive and visual-consistency issues, then applies targeted code changes directly to the source.

What is the best way to check a local development site for visual consistency problems?

The best way to check a local development site for visual consistency problems is running an automated visual inspection. It accesses the target project workspace to detect contrast issues and layout breaks, reporting them for code-level fixes.

Does automated visual inspection work with both static sites and full-stack production environments?

Automated visual inspection works with static sites and full-stack production environments. It navigates pages via browser automation to uncover responsive behavior and accessibility issues, regardless of whether the site runs locally or remotely.

Why do I need access to source code for a UI audit?

You need source code access for a UI audit because the review process guides and performs fixes at the source-code level. After detecting accessibility or layout issues via browser automation, it applies targeted changes within your project workspace.