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

web-design-reviewer

Inspect websites across viewports and apply code fixes for layout and accessibility issues.

2|Updated Apr 12, 2026
Search Tags:#accessibility#css#playwright#responsive#web-design#ui-fixes#visual-audit
One-click install
npx skills add https://github.com/Clay-HHK/claude-config --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-config/tree/main/skills/web-design-reviewer
Command: npx skills add https://github.com/Clay-HHK/claude-config --skill web-design-reviewer-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill automates visual inspection and remediation of website design problems so teams can quickly find and fix layout breakage, responsive regressions, accessibility failures, and visual inconsistencies that degrade user experience.

Core Features & Use Cases

  • Visual traversal and screenshot capture across multiple viewports to detect overflow, overlap, alignment, and breakpoint issues.
  • Accessibility checks for contrast, focus states, and missing alt text with severity-based prioritization.
  • Source-level diagnosis and minimal code edits for CSS, SCSS, Tailwind, CSS-in-JS, and component-based styles, with before/after verification.
  • Use case: run against a local dev server to locate a mobile layout regression, apply a minimal CSS fix in the workspace, and re-verify the result.

Quick Start

Review the website at http://localhost:3000 for responsive, accessibility, and layout issues and produce a prioritized fix report.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I find and fix responsive layout issues on my website?▼

To fix responsive layout issues, automate browser screenshot capture across multiple viewports to detect overflow and breakpoint failures, then apply minimal CSS edits to source files for remediation.

Can I run an automated accessibility audit on my local dev server?▼

Yes, you can run an automated accessibility audit on a local dev server to check for contrast, focus states, and missing alt text, generating a severity-based prioritization report for UI fixes.

What's the best way to diagnose CSS overflow and overlap problems in single-page apps?▼

The best way to diagnose CSS overflow and overlap problems in single-page apps is using browser automation to retrieve DOM elements and capture screenshots, identifying visual inconsistencies before applying source-level code edits.

Does this visual review process work with Tailwind and CSS-in-JS frameworks?▼

Yes, this visual review process supports Tailwind and CSS-in-JS frameworks by diagnosing source-level style issues and applying minimal code edits, verifying before and after screenshots to ensure visual consistency.

Do I need a running website and workspace access to inspect and fix UI issues?▼

Yes, you need a running website for browser automation screenshots and DOM retrieval, plus workspace access to source files to apply code-level fixes for visual design, accessibility, and layout problems.

Related Skills

Explore More Design & Creative Skills→
supermalangsupermalang

webapp-testing

Verify live web app behavior with Playwright and capture browser evidence.

Community
Advanced
EmaRimoldiEmaRimoldi

web-design-reviewer

Identify and fix visual design issues in HTML/CSS/JS across viewports.

Community
Advanced
HouseofmvpsHouseofmvps
115

visual-diff

Detect visual regressions in web UIs via Playwright screenshot comparisons.

Community
Intermediate
mindcockpit-aimindcockpit-ai
11

e2e-visual-regression

Automate Playwright visual regression testing to detect UI changes across browsers.

Official
Advanced