skills.rest
Clay-HHK
Clay-HHKCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspects websites via browser automation to detect and fix layout, responsive, and accessibility issues in source code.

1|Updated Mar 5, 2026
Search Tags:#accessibility#responsive design#css#ui review#web design#playwright#visual inspection
One-click install
npx skills add https://github.com/Clay-HHK/claude-skills --skill web-design-reviewer-clay-hhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/Clay-HHK/claude-skills/tree/main/web-design-reviewer
Command: npx skills add https://github.com/Clay-HHK/claude-skills --skill web-design-reviewer-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Visual design defects like element overflow, broken responsive layouts, and poor contrast are hard to catch without manually browsing every page at multiple screen sizes, and fixing them requires tracing rendered elements back to source files. ## Core Features & Use Cases - Automated Visual Inspection: Navigates pages, captures screenshots at mobile, tablet, desktop, and wide viewports, and detects layout, responsive, accessibility, and consistency issues. - Source-Level Fixes: Locates the responsible CSS, Tailwind, styled-components, or Vue scoped style files and applies minimal fixes following the project's existing patterns. - Iterative Re-verification: Reloads the page after each fix, compares before/after screenshots, and loops until issues are resolved. - Use Case: Point it at a local Next.js dev server, and it will find that the pricing table overflows on mobile, fix the Tailwind classes in the component, and verify the fix at 375px width. ## Quick Start Review the design of my website running at http://localhost:3000 and fix any layout or responsive issues you find.

Frequently Asked Questions about web-design-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review my website's design automatically?▼

Provide the URL of a running local, staging, or production site. The workflow navigates pages, captures screenshots at multiple viewports, detects layout and accessibility issues, then fixes them directly in your source code.

What browser automation tools work for visual design inspection?▼

Playwright MCP is the recommended reference implementation, offering navigation, screenshots, DOM snapshots, and viewport resizing. Selenium, Puppeteer, and Cypress also work if they provide navigation, screenshot, and DOM retrieval capabilities.

Does it support Tailwind CSS and styled-components projects?▼

Yes. It auto-detects the styling method from package.json and config files, supporting pure CSS, SCSS, CSS Modules, Tailwind, styled-components, Emotion, and Vue scoped styles, with framework-specific fix guidance in the references.

What accessibility issues can it detect?▼

It checks for insufficient text contrast against WCAG AA ratios, missing focus states for keyboard navigation, and missing alt text on images. Fixes include contrast-safe colors and focus-visible outlines.

Why are my style fixes not showing up in the browser?▼

Common causes include HMR not running on the dev server, browser cache, a required rebuild step, or CSS specificity conflicts. Reload, clear cache, rebuild, or use more specific selectors.

Related Skills

Explore More Design & Creative Skills→
Shaarav4795Shaarav4795

web-design-reviewer

Inspect websites visually and fix responsive, accessibility, and layout issues in source code.

Community
Intermediate
SaintPepsiSaintPepsi

github-issue-to-deploy

Automate a GitHub issue into code, tests, and a pull request.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced
dudedesi12dudedesi12

component-storybook

Create and manage UI component libraries with Storybook and Chromatic visual testing.

Community
Intermediate