How does the Web Design Reviewer find UI issues?

It uses browser automation tools like Playwright to navigate your site, capture screenshots, and analyze the DOM for layout overflows, misalignments, and accessibility violations.

Does my website need to be running for this skill to work?

Yes, the target website must be accessible via a URL, such as a local development server (localhost), a staging environment, or a live production site.

Is it safe to let the skill edit my source code?

The skill follows a 'minimal changes' principle and respects your existing code style. You can review all changes in your workspace before committing them to your repository.

Which viewports does the skill test by default?

It tests four standard viewports: Mobile (375px), Tablet (768px), Desktop (1280px), and Wide (1920px) to ensure full responsive compatibility.

Can it fix styles in Tailwind CSS or CSS-in-JS?

Yes, it is designed to detect the styling method used—whether it's Tailwind utility classes, SCSS, or CSS-in-JS—and apply fixes directly to the relevant source files.

Web Design Reviewer

Name: Web Design Reviewer
Author: Galaxy-Dawn

byGalaxy-Dawn

•

997

•

デザインツール

Analyzes live websites for visual and accessibility issues and automatically applies CSS or component-level fixes to the source code.

The Web Design Reviewer skill enables Claude to perform comprehensive visual audits of web applications running locally or in production. By combining browser automation with direct source code access, it detects layout breakages, responsive design flaws, and accessibility gaps across multiple viewports. Once issues are identified, the skill locates the specific style definitions or components responsible and implements fixes, making it an essential tool for maintaining high UI standards and cross-device consistency without manual trial-and-error.

主な機能

01Automated visual inspection across mobile, tablet, and desktop viewports

02997 GitHub stars

03Detection and repair of layout overflows, alignment issues, and element overlaps

04Integrated re-verification workflow with before-and-after screenshot validation

05Support for modern stacks including React, Next.js, Tailwind CSS, and SCSS

06Accessibility auditing for color contrast, focus states, and missing alt text

ユースケース

01Ensuring WCAG accessibility compliance for contrast and keyboard navigation

02Standardizing spacing and visual consistency across large-scale web projects

03Fixing responsive layout breakages on specific mobile device resolutions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add galaxy-dawn/claude-scholar web-design-reviewer

For use in Claude.ai and ChatGPT

Download Skill