skills.rest
eric-sabe
eric-sabeCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect web applications across viewports and apply source-level fixes for design and accessibility issues.

1|Updated Jun 24, 2026
Search Tags:#accessibility#frontend#responsive design#web design#visual testing#layout debugging#ui fixes
One-click install
npx skills add https://github.com/eric-sabe/engsys --skill web-design-reviewer-eric-sabe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/eric-sabe/engsys/tree/main/core/skills/web-design-reviewer
Command: npx skills add https://github.com/eric-sabe/engsys --skill web-design-reviewer-eric-sabe

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Manually auditing websites for design flaws, responsive breaks, and accessibility gaps across multiple devices and screen sizes is extremely time-consuming, and tracking down the root cause of issues in complex codebases adds significant overhead.

Core Features & Use Cases

  • Cross-viewport visual inspection: Automatically test websites at mobile, tablet, desktop, and wide screen sizes to catch responsive design issues early.
  • Multi-category issue detection: Identifies layout breaks, accessibility gaps, visual inconsistencies, and mobile usability problems with clear severity ratings.
  • Source-level auto-fixing: Pinpoints the exact source files causing design issues and applies minimal, style-conforming fixes directly to your project code.
  • Use case: A frontend team can use this skill to quickly audit a new React component library for accessibility and responsive issues before launch, fixing all detected problems without manual browser testing.

Quick Start

Use the web-design-reviewer skill to perform a full design audit of your local website at http://localhost:3000, identify all layout and accessibility issues, and apply fixes directly to your project's source files.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I automatically find and fix responsive design issues across different screen sizes?▼

To fix responsive design issues, automated cross-viewport visual inspection tests websites at mobile, tablet, desktop, and wide screen sizes to catch layout breaks. It pinpoints exact source files and applies style-conforming fixes directly to project code.

Can I automatically audit my web application for accessibility problems and apply code fixes?▼

Yes, you can audit web applications for accessibility problems using automated visual inspection. It identifies accessibility gaps with clear severity ratings, pinpoints exact source files, and applies style-conforming fixes directly to project code.

What is the best way to perform an end-to-end visual inspection of a local React component library?▼

The best way to perform an end-to-end visual inspection is using browser automation for navigation, screenshot capture, and DOM retrieval. This detects multi-category layout, accessibility, and mobile usability problems before applying minimal fixes to source files.

Does automated web design auditing work with static sites and full-stack frameworks running in staging?▼

Automated web design auditing works with static sites, SPAs, full-stack frameworks, and CMS platforms running on local, staging, or production environments. It requires browser automation capabilities and source code access to implement fixes directly.

Why do I need browser automation and source code access to debug frontend layout breaks?▼

You need browser automation and source code access to debug frontend layout breaks because automation handles navigation, screenshot capture, and DOM retrieval to detect issues, while source access allows applying style-conforming fixes directly to project files.

Related Skills

Explore More Software Engineering Skills→
forgivesam168forgivesam168
2

web-design-reviewer

Inspect websites visually and diagnose design issues across frameworks.

Community
Advanced
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
NolanPicNolanPic

Frontend Components

Enforce frontend component coding standards in Claude Code workflows.

Community
Basic
githubgithub
37.6k

web-design-reviewer

Inspect web interfaces for layout, accessibility, and visual consistency issues.

Official
Intermediate