web-design-reviewer

Inspect website screenshots and DOM structures to fix layout and accessibility issues.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/serotoninboi/claudine-ai-v3.1 --skill web-design-reviewer-serotoninboi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/serotoninboi/claudine-ai-v3.1/tree/main/.kilocode/skills/web-design-reviewer
Command: npx skills add https://github.com/serotoninboi/claudine-ai-v3.1 --skill web-design-reviewer-serotoninboi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill automatically identifies and fixes visual and functional 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 to resolve identified issues.
  • Use Case: You've just deployed a new marketing page, but it looks broken on mobile. This skill can automatically find the layout issues on smaller screens and fix the CSS directly in your project's codebase.

Quick Start

Review the website at http://localhost:3000 for any 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 and responsive layout issues automatically?

You can fix website design flaws automatically by using a tool that analyzes screenshots, DOM structures, and source files to identify and modify CSS directly. This resolves layout, responsiveness, and visual consistency problems across your project.

How do I review my website UI for accessibility and visual consistency problems?

To review your website UI for accessibility and visual consistency, you need a tool that performs visual inspection on screenshots and DOM structures. It detects layout inconsistencies and accessibility issues, then corrects the source code to ensure a polished user experience.

Can I automate CSS fixes and code correction for responsive web design across different frameworks?

Yes, you can automate CSS fixes across static sites, SPAs, and full-stack frameworks. By leveraging browser automation tools, the review process inspects project source files and applies code corrections to resolve responsiveness issues automatically.

What is the best way to inspect a locally deployed web page for mobile responsiveness and UI errors?

The best way to inspect a locally deployed web page for mobile responsiveness is to run an automated visual inspection against your local server. It detects broken layouts on smaller screens and modifies your project's source code to repair the CSS.

Does automated UI review work with single page applications and static sites?

Automated UI review works with single page applications, static sites, and full-stack frameworks. It leverages browser automation tools to analyze the DOM structure and project source files, applying automated fixes to resolve identified visual design issues.

Why does my deployed web page look broken on mobile, and how do I resolve the layout issues?

Your deployed web page looks broken on mobile due to underlying CSS or DOM responsiveness flaws. You can resolve these layout issues by running an automated visual inspection that identifies the broken elements and modifies your source code to fix the styling directly.