web-design-reviewer

Identify and fix visual design issues in HTML/CSS/JS across viewports.

Updated Mar 27, 2026
One-click install
npx skills add https://github.com/EmaRimoldi/Claude-scholar-extended --skill web-design-reviewer-emarimoldi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/EmaRimoldi/Claude-scholar-extended/tree/main/skills/web-design-reviewer
Command: npx skills add https://github.com/EmaRimoldi/Claude-scholar-extended --skill web-design-reviewer-emarimoldi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and developers often ship websites with layout, accessibility, and visual consistency issues that hinder user experience. This skill provides automated visual inspection and targeted source-code fixes to improve design quality across pages and devices.

Core Features & Use Cases

  • Visual inspection of layouts, responsiveness, accessibility, and visual consistency across pages.
  • Automatic detection of issues and guided fixes at the source code level (HTML/CSS/JS).
  • Use Case: When a site misaligns on mobile, run this skill to identify problematic components and apply code-level adjustments, then re-verify.

Quick Start

Run a visual review of the target site and apply source-level fixes for identified design 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 identify and fix responsive design issues in my web application?

To identify responsive design issues, you need a visual inspection process that detects layout flaws across multiple viewports and applies targeted HTML, CSS, and JS source-level fixes. This approach re-verifies the adjustments to ensure visual consistency across all device breakpoints.

What is automated visual inspection for web design and how does it work?

Automated visual inspection scans live or local websites to document visual design issues affecting responsiveness, accessibility, and consistency. It reads workspace code and assets to detect breakpoints, automatically identifies problematic components, and generates a completion report with before and after visuals.

Can I use this approach to fix accessibility issues directly in my source code?

Yes, automated design review identifies accessibility issues during the visual inspection phase and applies guided fixes directly at the source code level. It modifies HTML, CSS, and JS files to resolve accessibility barriers and re-verifies the changes across multiple viewports.

How do I ensure visual consistency across different web pages and devices?

Ensuring visual consistency requires inspecting layouts across multiple viewports and detecting breakpoint misalignments. By applying source-level fixes to HTML, CSS, and JS, you can correct visual inconsistencies and generate a completion report with before and after visuals to verify the results.

What is the best way to debug mobile layout misalignment in my website?

The best way to debug mobile layout misalignment is running an automated visual review that detects problematic components at specific breakpoints. It applies code-level adjustments to your HTML and CSS, then re-verifies the layout across multiple viewports to confirm the fix.