web-design-reviewer

Inspect website designs and fix responsive, accessibility, and layout issues in source code.

Updated Jan 16, 2026
One-click install
npx skills add https://github.com/sandeepmvn/githubmdfiles --skill web-design-reviewer-sandeepmvn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/sandeepmvn/githubmdfiles/tree/main/VSContributed/skills/web-design-reviewer
Command: npx skills add https://github.com/sandeepmvn/githubmdfiles --skill web-design-reviewer-sandeepmvn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the visual inspection of websites, identifying and rectifying design flaws directly within the source code, ensuring a polished and professional online presence.

Core Features & Use Cases

  • Visual Inspection: Detects issues related to responsive design, accessibility, visual consistency, and layout breakage.
  • Automated Fixing: Modifies source code to resolve identified design problems.
  • Use Case: A marketing team launches a new landing page, but it looks broken on mobile devices. This Skill can be used to automatically identify the layout issues on smaller screens and apply the necessary CSS fixes to ensure it displays correctly across all devices.

Quick Start

Review the website design at http://localhost:3000 and fix any layout issues.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I automatically find and fix responsive design issues in my web application?

You can detect and resolve responsive design issues by using a visual inspection tool that navigates your site, screenshots the layout, and modifies the source code to fix breakages across various frameworks.

Can I automate accessibility fixes directly in my source code?

Yes, automated accessibility fixing is possible by identifying visual and DOM-level issues during inspection and applying modifications directly to your project's source code.

What do I need to inspect website layouts and fix UI issues automatically?

To inspect website layouts and fix UI issues, you need browser automation capabilities for navigation and screenshotting, along with access to your project source code for applying fixes.

How does visual inspection detect layout breakage on mobile devices?

Visual inspection detects layout breakage on mobile devices by automating browser navigation to target URLs, capturing screenshots, retrieving DOM elements, and identifying visual inconsistencies across screen sizes.

What is the best way to review website design at localhost and fix CSS problems?

The best way to review website design at localhost is to run an automated visual inspection that screenshots the local environment, detects layout problems, and modifies the source code to apply fixes.

Why does my web design review fail when the browser cannot access the local environment?

Your web design review fails because browser automation requires active navigation capabilities to reach the local environment, screenshot the page, and retrieve DOM elements for visual inspection.