skills.rest
webmaxru
webmaxruCOMMUNITY
Explore all skills by this author →
Website𝕏@webmaxruGitHub

web-design-reviewer

Detect and fix visual, responsive, accessibility, and layout issues in web applications.

Updated Jan 14, 2026
Search Tags:#accessibility#css#playwright#responsive-design#ui-review#visual-inspection#layout-fix
One-click install
npx skills add https://github.com/webmaxru/octocat_supply --skill web-design-reviewer-webmaxru
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/webmaxru/octocat_supply/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/webmaxru/octocat_supply --skill web-design-reviewer-webmaxru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies visual, responsive, accessibility, and layout problems on websites and guides or applies source-level fixes to restore consistent, usable UI across viewports.

Core Features & Use Cases

  • Visual Inspection: Capture screenshots and analyze layouts to detect overflow, overlap, clipping, and spacing inconsistencies.
  • Responsive Testing: Validate layouts across mobile, tablet, desktop, and wide viewports and detect breakpoint failures.
  • Accessibility Checks: Identify contrast issues, missing alt text, and focus state problems and recommend fixes.
  • Code-level Fixes: Locate style or component files, apply minimal CSS/JS adjustments, and re-verify changes in the running environment.
  • Use Case: Run a review against a local dev server, fix a flexbox overflow, and provide before/after screenshots and a patch file.

Quick Start

Review the website at http://localhost:3000 for layout, responsive, and accessibility issues and propose code-level fixes.

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 across different viewports?▼

You can detect responsive layout issues by capturing screenshots across mobile, tablet, desktop, and wide viewports to identify breakpoint failures, then apply minimal CSS adjustments to restore consistent UI.

Can I automate accessibility checks for missing alt text and contrast issues?▼

You can automate accessibility checks by retrieving the DOM to identify contrast issues, missing alt text, and focus state problems, then applying recommended source-level fixes to restore compliance.

What's the best way to detect visual overflow and overlap during web development?▼

Detect visual overflow and overlap by using browser automation to capture screenshots and analyze layouts, revealing clipping and spacing inconsistencies for iterative source-level fixes.

Does browser-based UI review work with single page applications and full-stack frameworks?▼

Browser-based UI review works with static sites, SPAs, and full-stack frameworks by requiring a reachable URL and browser automation for screenshots and DOM retrieval to guide iterative fix cycles.

Do I need access to project source code to apply layout fixes?▼

You need access to the project source code when applying edits, allowing the process to locate style or component files, apply minimal CSS or JS adjustments, and re-verify changes in the running environment.

Why does my flexbox layout break and how can I patch it?▼

Flexbox layout breaks cause overflow or overlap; patch this by reviewing the running local dev server, locating component files, applying minimal CSS adjustments, and generating a patch file with before and after screenshots.

Related Skills

Explore More Design & Creative Skills→
githubgithub
37.6k

webapp-testing

Automate browser-based testing of local web applications with Playwright.

Official
Intermediate
nagashima-torunagashima-toru

verify

Run Maven verify to detect architecture test failures and dependency issues.

Community
Intermediate
alexandereiseghohialexandereiseghohi

web-design-reviewer

Detects and repairs visual, responsive, and accessibility defects in frontend source code.

Community
Advanced
RxFitRxFit

canary

Monitor live web apps for console errors and performance regressions post-deployment.

Community
Advanced