Can it automatically fix the issues it finds?

Yes. Once a design issue is identified via visual inspection, the skill uses file searching and semantic analysis to locate and edit the source code to resolve the problem.

Which styling methods are supported?

The skill supports Pure CSS, SCSS, Tailwind CSS, CSS Modules, and CSS-in-JS libraries like styled-components and Emotion.

Does it require any specific external tools?

While flexible, it is optimized to work with browser automation tools such as Playwright MCP for capturing screenshots and retrieving DOM snapshots.

Does this skill work with local development servers?

Yes, it is specifically designed to review websites running on localhost, as well as staging and production environments.

Web Design Reviewer

Name: Web Design Reviewer
Author: rodolfolermacontreras

byrodolfolermacontreras

•

Herramientas de Diseño

Automates visual UI inspections to detect and fix responsive layout issues, accessibility violations, and styling inconsistencies at the source code level.

Web Design Reviewer is a specialized Claude Code skill designed to bridge the gap between visual debugging and code implementation. By leveraging browser automation tools like Playwright, it captures screenshots and analyzes DOM structures across various viewports to identify layout breakage, element overflows, and accessibility gaps. Beyond mere reporting, the skill navigates your project's workspace to identify the exact CSS or component files responsible for design flaws, applying surgical fixes and re-verifying the results to ensure a polished, production-ready frontend.

Características Principales

01Direct source code modification for CSS, Tailwind, and React/Vue components

02Automated accessibility auditing for contrast, alt text, and focus states

03Visual consistency checks for fonts, colors, and spacing patterns

041 GitHub stars

05Closed-loop verification of fixes via automated browser re-loading

06Multi-viewport responsive testing (Mobile, Tablet, Desktop, Wide)

Casos de Uso

01Ensuring visual consistency across complex SPA architectures like Next.js or Nuxt

02Identifying and fixing element overflow and layout breakage on mobile devices

03Performing comprehensive accessibility audits and implementing WCAG-compliant fixes

Características Principales

01Direct source code modification for CSS, Tailwind, and React/Vue components

02Automated accessibility auditing for contrast, alt text, and focus states

03Visual consistency checks for fonts, colors, and spacing patterns

041 GitHub stars

05Closed-loop verification of fixes via automated browser re-loading

06Multi-viewport responsive testing (Mobile, Tablet, Desktop, Wide)

Casos de Uso

01Ensuring visual consistency across complex SPA architectures like Next.js or Nuxt

02Identifying and fixing element overflow and layout breakage on mobile devices

03Performing comprehensive accessibility audits and implementing WCAG-compliant fixes