skills.rest
JLSed
JLSedCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/JLSed/Novault --skill web-design-reviewer-jlsed
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
KnoWhizKnoWhiz
6

remote-browser

Control a cloud-based browser from sandboxed environments for web navigation and data extraction.

Official
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

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

Community
Advanced
Camilo8902Camilo8902

visual-regression-tester

Automate visual regression testing with Playwright and Chromatic screenshot comparisons.

Community
Advanced
BrunoAMSilvaBrunoAMSilva

web-design-reviewer

Inspect and fix layout, accessibility and UI consistency issues in web applications.

Community
Advanced