web-design-reviewer

Inspect website design quality and fix layout, responsiveness, and accessibility issues in source code.

Updated Jan 24, 2026

Search Tags:#ui #accessibility #layout #responsive #web-design #design-review

Ready to run

npx skills add https://github.com/JLSed/Novault --skill web-design-reviewer-jlsed

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/JLSed/Novault/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/JLSed/Novault --skill web-design-reviewer-jlsed

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.

Core Features & Use Cases

Static sites (HTML/CSS/JS)
SPA frameworks such as React / Vue / Angular / Svelte
Full-stack frameworks such as Next.js / Nuxt / SvelteKit
CMS platforms such as WordPress / Drupal
Any other web application

Quick Start

Review a locally running site and initiate a visual design review across viewports.

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 UI design and fix accessibility issues directly in the codebase?▼

You can review website UI design and fix accessibility issues by inspecting the source code, using browser automation to capture visuals and extract DOM information, then modifying the files to correct layout, responsiveness, and accessibility problems directly.

Can I run a visual design review on my React or Next.js SPA framework?▼

Yes, visual design reviews work with React, Next.js, and other SPA frameworks. The skill navigates pages, captures viewport visuals, and reads the full-stack application source code to identify and correct UI issues.

How do I detect responsive layout problems across different viewport sizes?▼

Detect responsive layout problems by navigating pages with browser automation and capturing visuals across multiple viewports. This process extracts DOM information to locate and fix design issues in the local, staging, or production codebase.

Does this design review process support CMS platforms like WordPress?▼

Yes, the design review process supports CMS platforms like WordPress and Drupal. It navigates the site views to validate visual quality and can access the workspace to modify the underlying source files for necessary fixes.

What's the best way to validate static site design quality without manually checking every page?▼

The best way to validate static site design quality is using automated browser navigation to capture visuals and extract DOM data. This method inspects HTML, CSS, and JS files to detect layout and accessibility issues automatically.

Why does my web application need browser automation for a code-level design review?▼

Browser automation is needed for a code-level design review because it navigates pages, captures viewport visuals, and extracts DOM information that must be cross-referenced with the source files to accurately detect and fix UI issues.