skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-reviewer

Detect and fix visual and layout issues in web applications.

2|Updated Mar 26, 2026
Search Tags:#accessibility#playwright#web-design#visual-regression#ui-review#responsive-testing#css-fixes
One-click install
npx skills add https://github.com/involvex/happy-vibecode --skill web-design-reviewer-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/involvex/happy-vibecode/tree/main/.agents/skills/web-design-reviewer
Command: npx skills add https://github.com/involvex/happy-vibecode --skill web-design-reviewer-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill automates visual inspection and remediation of web design problems so teams can quickly identify layout breakage, responsive issues, accessibility gaps, and visual inconsistencies and apply minimal code-level fixes.

Core Features & Use Cases

  • Visual Inspection: Navigate pages, capture screenshots, and retrieve DOM snapshots to locate element overflow, overlap, alignment, and spacing problems.
  • Responsive & Accessibility Testing: Test multiple viewports, detect contrast and focus issues, and flag touch-target and breakpoint regressions.
  • Source-level Fixes: Search for style and component sources, apply minimal framework-aware CSS or component changes, and re-verify with before/after comparisons.
  • Example Use Case: Run a review on a Next.js site to find mobile layout breakage, update the offending CSS or Tailwind classes in the source, and confirm fixes via automated screenshots.

Quick Start

Ask the agent to "Review the website at http://localhost:3000 for layout, responsive, and accessibility issues and apply minimal fixes to source files when possible."

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 breakage in a React or Next.js web application?▼

Automated visual inspection detects responsive layout breakage by capturing screenshots across viewports and retrieving DOM snapshots, then applies minimal framework-aware CSS fixes to source files for React, Next.js, and other SPA frameworks.

What is automated visual regression testing for web design and how does it work?▼

Automated visual regression testing navigates web pages to capture screenshots and retrieve DOM snapshots, locating element overflow, overlap, and alignment problems. It flags visual inconsistencies and verifies applied code-level fixes using before and after comparisons.

Can I run an accessibility audit and fix contrast or touch-target issues automatically?▼

Yes, automated accessibility audits detect contrast and focus issues while flagging touch-target and breakpoint regressions. The tool searches component sources to apply minimal CSS changes and re-verifies the fixes using automated before and after screenshots.

Does browser automation visual testing work with static sites and CMS platforms?▼

Browser automation visual testing works with static sites, SPA frameworks like React, Vue, and Svelte, full-stack frameworks like Next.js and SvelteKit, and CMS platforms. It requires a running target site reachable by browser automation with screenshot capabilities.

What are the limitations of automated UI review for web applications?▼

Automated UI review requires a running target site reachable by browser automation and workspace access to source files. Without a live server or accessible source code, it cannot capture screenshots, retrieve DOM snapshots, or apply and verify code-level fixes.

Related Skills

Explore More Design & Creative Skills→
Clay-HHKClay-HHK
2

web-design-reviewer

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

Community
Intermediate
EmaRimoldiEmaRimoldi

web-design-reviewer

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

Community
Advanced
angryconsultantangryconsultant

web-design-reviewer

Audit running websites for accessibility, responsive behavior, and visual consistency.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced