web-design-reviewer

Inspects and fixes website UI issues across frameworks and styling methods.

21|4|Updated Mar 14, 2026
One-click install
npx skills add https://github.com/HaipingXu/social-science-claude-scholar --skill web-design-reviewer-haipingxu
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/HaipingXu/social-science-claude-scholar/tree/main/skills/web-design-reviewer
Command: npx skills add https://github.com/HaipingXu/social-science-claude-scholar --skill web-design-reviewer-haipingxu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and fixes visual design issues on 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 (CSS, component files) to resolve identified issues.
  • Use Case: You've just deployed a new feature, but the layout looks broken on mobile. Use this Skill to automatically find and fix the responsive design bugs.

Quick Start

Use the web-design-reviewer skill to check and fix the design of the website at http://localhost:3000.

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 responsive design and layout breakage on my website?

To fix responsive design and layout breakage, you need to inspect the DOM structure and modify the source code or CSS. This process detects responsiveness issues and adjusts component files to resolve visual inconsistencies automatically.

What's the best way to check website accessibility and visual consistency?

The best way to check website accessibility and visual consistency is through visual inspection of the DOM structure. This approach identifies accessibility problems and UI flaws, allowing you to modify styling and ensure a professional user experience.

Can I automatically fix CSS and component files for UI review issues?

Yes, you can automatically fix CSS and component files during a UI review. By analyzing the DOM structure, the tool modifies the source code directly to resolve detected layout, accessibility, and visual consistency problems.

Does this visual inspection approach work with various web frameworks and styling methods?

Yes, this visual inspection approach works across various web frameworks and styling methods. It analyzes the rendered DOM structure to detect and resolve design issues regardless of the underlying component architecture.

Why does my website layout look broken on mobile after deploying a new feature?

Your website layout looks broken on mobile due to responsive design bugs introduced during deployment. You can fix this by analyzing the DOM structure and modifying the source code to correct the responsiveness and visual layout issues.