How does it actually fix design issues?

After identifying a visual issue via a screenshot, the skill searches your workspace for the corresponding source file and element to apply CSS or component updates.

Can it test for mobile responsiveness?

Yes, it automatically tests layouts across multiple viewports including mobile (375px), tablet (768px), and various desktop resolutions.

What tech stacks does the Web Design Reviewer support?

It supports all major web technologies including React, Vue, Next.js, Svelte, and WordPress, as well as styling methods like Tailwind CSS, SCSS, and CSS-in-JS.

Is Playwright required for this skill?

Playwright MCP is the recommended reference implementation for browser automation, but it can work with other tools providing navigation and screenshot capabilities.

Does my website need to be live to use this skill?

The website must be running and accessible via a URL, which can be a local development server (like localhost:3000) or a remote staging environment.

Web Design Reviewer

Name: Web Design Reviewer
Author: Tahir-yamin

byTahir-yamin

•

Design Tools

Automates visual audits and source code fixes for UI layouts, responsive design breaks, and accessibility issues.

The Web Design Reviewer skill transforms Claude into an expert frontend auditor capable of performing live visual inspections on local or remote web applications. By utilizing browser automation and screenshot analysis, it identifies common design flaws such as element overflows, inconsistent spacing, and mobile responsiveness failures. Beyond mere detection, the skill maps these visual bugs directly to your source code—whether you are using Tailwind CSS, Styled Components, or traditional CSS—and applies verified fixes to ensure your site remains polished and user-friendly across all devices.

Key Features

015 GitHub stars

02Automated visual inspection using browser snapshots and screenshot analysis

03Accessibility auditing for contrast ratios, focus states, and semantic HTML

04Cross-viewport responsive testing for mobile, tablet, and desktop layouts

05Integrated regression testing to verify fixes without breaking existing styles

06Source-level bug fixing for CSS, Tailwind CSS, and modern JS frameworks

Use Cases

01Ensuring design consistency and brand color alignment across a multi-page SPA

02Auditing and fixing responsive layout breaks on a local development server

03Rapidly identifying and resolving accessibility violations in a staging environment

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tahir-yamin/dev-engineering-playbook web-design-reviewer

For use in Claude.ai and ChatGPT

Download Skill