Web Design Reviewer

This one automates the tedious back-and-forth of visual QA by loading your site (localhost or staging), taking screenshots across mobile/tablet/desktop viewports, spotting layout breaks and accessibility issues, then editing your actual source files to fix them. It handles React, Vue, Next.js, Tailwind, CSS modules, whatever you're using. The workflow is inspect, fix, reload, verify, repeat until clean. What I like is it prioritizes fixes by severity and respects your existing code patterns instead of bulldozing through with generic solutions. Works best when you point it at a running dev server and let it loose on responsive bugs or visual inconsistencies you know exist but don't want to hunt down manually.

skills.sh installs: 378
GitHub stars: 6K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add galaxy-dawn/claude-scholar --skill web-design-reviewer --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Design Reviewer

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

Scope of Application

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

Prerequisites

Required

Target website must be running
- Local development server (e.g., http://localhost:3000)
- Staging environment
- Production environment (for read-only reviews)
Browser automation must be available
- Screenshot capture
- Page navigation
- DOM information retrieval
Access to source code (when making fixes)
- Project must exist within the workspace

Workflow Overview

flowchart TD
    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
    B --> C[Step 3: Issue Fixing]
    C --> D[Step 4: Re-verification]
    D --> E{Issues Remaining?}
    E -->|Yes| B
    E -->|No| F[Completion Report]