web-design-reviewer

Inspect website source code and fix layout, responsiveness, accessibility, and consistency issues.

Updated Dec 28, 2025

Search Tags:#accessibility #responsive design #web design #code correction #UI review #layout fixing

Ready to run

npx skills add https://github.com/74nu5/Narratum --skill web-design-reviewer-74nu5

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/74nu5/Narratum/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/74nu5/Narratum --skill web-design-reviewer-74nu5

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 to identify and fix design issues, ensuring a polished and professional online presence.

Core Features & Use Cases

Visual Inspection: Detects layout, responsiveness, accessibility, and consistency problems.
Automated Fixing: Modifies source code to resolve identified design issues.
Use Case: Review a newly developed e-commerce product page to ensure it looks perfect on mobile, tablet, and desktop, and fix any layout or contrast issues before launch.

Quick Start

Review the website at http://localhost:3000 and fix any identified design problems.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema

How do I fix website design flaws like layout and responsiveness issues?▼

You can fix website design flaws by inspecting the source code to identify layout, responsiveness, and accessibility problems, then applying targeted code corrections to resolve visual inconsistencies across mobile, tablet, and desktop views.

Does automated UI review work with static sites and full-stack frameworks?▼

Automated UI review works with static sites, single-page applications, full-stack frameworks, and CMS platforms. It analyzes your styling methods and source code to detect and resolve visual consistency problems across these various web environments.

What is the best way to ensure my e-commerce page is accessible before launch?▼

The best way to ensure accessibility is to run an automated visual inspection on your e-commerce page to detect contrast and layout issues, which then modifies your source code to apply targeted fixes for a polished presence.

How do I review a local development server for visual consistency problems?▼

To review a local development server for visual consistency problems, you can target your localhost URL for inspection, which will analyze the rendered site and modify the source code to fix identified design issues automatically.

Can I correct source code to resolve accessibility and contrast issues automatically?▼

Yes, you can correct source code to resolve accessibility and contrast issues automatically. The inspection process identifies these specific flaws and directly modifies the styling and layout in your codebase to achieve compliance.

Why does my responsive design break on mobile devices and how can I fix it?▼

Responsive design breaks on mobile due to layout inconsistencies in your styling methods. You can fix it by inspecting the site to detect responsiveness flaws, then applying targeted source code modifications to resolve the broken views.