web-design-reviewer

Inspect website design issues and fix source code across frameworks.

Updated Feb 16, 2026

Search Tags:#accessibility #responsive design #web design #front-end development #UI review #CSS fixing

Ready to run

npx skills add https://github.com/Thedougler/agent-template --skill web-design-reviewer-thedougler

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/Thedougler/agent-template/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/Thedougler/agent-template --skill web-design-reviewer-thedougler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and fixes visual design issues in websites, ensuring a polished and professional user experience across all devices.

Core Features & Use Cases

Visual Inspection: Detects layout, responsiveness, accessibility, and consistency problems.
Automated Fixing: Modifies source code to resolve identified design flaws.
Use Case: Review a newly deployed e-commerce site for broken layouts on mobile devices and fix the CSS to ensure a seamless shopping experience.

Quick Start

Review the website at http://localhost:3000 for any 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 fix website design flaws like broken responsive layouts and accessibility issues?▼

To fix website design flaws, you need visual inspection and source code modification. This involves identifying layout, responsiveness, and accessibility problems through browser automation, then directly editing the CSS or front-end code to resolve them.

Can I automate UI review and CSS fixing for a locally hosted front-end development project?▼

Yes, you can automate UI review and CSS fixing for a local front-end development project. The process uses browser automation to navigate, screenshot, and inspect the DOM, then directly modifies your project's source files to patch the detected visual inconsistencies.

What's the best way to review and resolve mobile responsiveness problems in my web design?▼

The best way to resolve mobile responsiveness problems in web design is through visual inspection of the live site. By screenshotting the layout on mobile views and inspecting the DOM, you can pinpoint the exact CSS rules causing breaks and patch the source code directly.

Do I need browser automation capabilities to inspect and fix front-end accessibility issues?▼

Yes, you need browser automation capabilities to inspect and fix front-end accessibility issues. Browser automation allows the tool to navigate the website, screenshot the visual state, and inspect the DOM to accurately identify accessibility flaws for source code modification.

Does this visual inspection method work with various front-end frameworks and styling methods?▼

Yes, this visual inspection method works across various front-end frameworks and styling methods. As long as the tool has access to the project's source files and can run browser automation for DOM inspection, it can directly edit the underlying code to resolve design flaws.

Why does my web design review require access to the project's source files for modifications?▼

Your web design review requires access to the project's source files to perform automated fixing. While browser automation handles visual inspection and DOM analysis, modifying the actual source code is necessary to permanently resolve the identified layout, responsiveness, and accessibility problems.