web-design-reviewer

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

Updated Jan 19, 2026

Search Tags:#automation #accessibility #UI #review #responsive #web-design

Ready to run

npx skills add https://github.com/alexandereiseghohi/ComicWise --skill web-design-reviewer-alexandereiseghohi

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps teams identify and fix front-end design issues, ensuring responsive layouts, accessible interfaces, and visual consistency directly in the source.

Core Features & Use Cases

Web design validation across static sites and SPA frameworks (React, Vue, Angular, and Svelte) to catch layout, typography, and color issues.
Automated visual checks and design fixes at the code level, focusing on responsive behavior and accessibility.
Use Case: When a design audit reveals misaligned components on various viewports, run this skill to generate targeted code changes that align spacing, typography, and contrast.

Quick Start

Install and configure the skill, point it at your local or remote site, and let it detect issues and propose fixes for the frontend codebase.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema

How do I automate responsive layout and accessibility fixes in React source code?▼

Automated responsive layout and accessibility fixes in React source code require browser automation to capture the DOM and screenshots, detect visual inconsistencies, and patch the original files with minimal, verifiable code changes.

Does this web design review tool work with Vue, Angular, and Svelte?▼

Yes, this web design review tool works with Vue, Angular, and Svelte. It validates web UI design quality across static sites and SPA frameworks by detecting layout, typography, and color issues directly at the source code level.

What's the best way to debug visual consistency issues in a Next.js app?▼

The best way to debug visual consistency issues in a Next.js app is running an automated source code review that captures the DOM via browser automation, identifies misaligned components, and generates targeted code patches for typography and spacing.

Can I use Playwright to capture screenshots for automated UI design audits?▼

Yes, you can use Playwright or similar tooling to capture screenshots for automated UI design audits. The review process integrates with browser automation to capture the DOM and apply minimal fixes to the frontend codebase.

How do I fix color contrast and typography issues at the code level?▼

Fixing color contrast and typography issues at the code level involves reviewing the source files to detect visual inconsistencies and generating targeted code changes that correct spacing, contrast, and typographic alignment across different viewports.

When do I need browser automation for web design validation?▼

Browser automation for web design validation is needed when you want to detect responsive behavior and accessibility issues dynamically. It captures the DOM and screenshots required to apply minimal, verifiable fixes directly to the source code.