skills.rest
cpich3g
cpich3gCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-reviewer

Detect layout, typography, accessibility, and consistency issues on websites.

Updated Feb 25, 2026
Search Tags:#automation#accessibility#responsive#ui-ux#quality-assurance#web-design#visual-inspection
One-click install
npx skills add https://github.com/cpich3g/ai-cost-optimiser --skill web-design-reviewer-cpich3g
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/cpich3g/ai-cost-optimiser/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/cpich3g/ai-cost-optimiser --skill web-design-reviewer-cpich3g

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual design issues on websites are common and time-consuming to detect manually; this skill automates the detection of layout, typography, accessibility, and visual consistency problems and suggests fixes.

Core Features & Use Cases

  • Automated visual inspection detects layout misalignments, contrast issues, responsive breakpoints, and accessibility gaps.
  • Generates actionable fixes or changes at the source code level for web projects (static sites, SPAs, Next.js/Nuxt, CMS platforms).
  • Use Case: As a developer, run this skill against a local site to identify and fix design defects before release.

Quick Start

Provide the URL of the site to review and the skill will start automated visual checks.

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 visual inspection to detect layout and typography issues on my website?▼

Automated visual inspection detects layout misalignments, typography errors, and contrast issues by using browser automation to navigate sites and capture screenshots for review.

Can I run automated web design checks on single page applications built with React or Vue?▼

Automated web design checks support SPAs including React, Vue, Angular, and Svelte, as well as frameworks like Next.js and Nuxt, by retrieving DOM elements for inspection.

How does automated visual QA handle accessibility and responsive breakpoint problems?▼

Automated visual QA handles accessibility and responsive breakpoints by performing visual checks that detect contrast issues and layout gaps across different viewports.

Does this automated design review tool apply fixes directly to my source code?▼

The automated design review suggests and applies fixes directly to source code by utilizing file read/write and code search capabilities within your web project.

What is the best way to perform visual QA on a staging environment before release?▼

The best way to perform visual QA on staging environments is providing the site URL to trigger automated checks that detect design defects before release.

Can I use browser automation to review design consistency on CMS platforms?▼

Browser automation can review design consistency on CMS platforms and any web application by navigating pages and capturing screenshots for visual inspection.

Related Skills

Explore More Design & Creative Skills→
angryconsultantangryconsultant

web-design-reviewer

Audit running websites for accessibility, responsive behavior, and visual consistency.

Community
Intermediate
jaisonerickjaisonerick

fix-bugs

Reproduce QA-reported failures with failing tests and apply minimal code fixes.

Community
Advanced
petrkohutpetrkohut

bmad-testarch-test-review

Automate test quality review and validation against best practices.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

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

Community
Advanced