# Web Design Reviewer

Enables visual inspection of websites running locally or remotely to identify and fix...

- Repository: https://github.com/Galaxy-Dawn/claude-scholar (5959 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-19
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Galaxy-Dawn/claude-scholar --skill web-design-reviewer -g -a claude-code -y`
Codex: `npx skills add Galaxy-Dawn/claude-scholar --skill web-design-reviewer -g -a codex -y`
Cursor: `npx skills add Galaxy-Dawn/claude-scholar --skill web-design-reviewer -g -a cursor -y`
Gemini CLI: `npx skills add Galaxy-Dawn/claude-scholar --skill web-design-reviewer -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Galaxy-Dawn/claude-scholar`

## Description

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

1. **Target website must be running**
   - Local development server (e.g., `http://localhost:3000`)
   - Staging environment
   - Production environment (for read-only reviews)

2. **Browser automation must be available**
   - Screenshot capture
   - Page navigation
   - DOM information retrieval

3. **Access to source code (when making fixes)**
   - Project must exist within the workspace

## Workflow Overview

```mermaid
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]
```

---

## Step 1: Information Gathering Phase

### 1.1 URL Confirmation

If the URL is not provided, ask the user:

> Please provide the URL of the website to review (e.g., `http://localhost:3000`)

### 1.2 Understanding Project Structure

When making fixes, gather the following information:

| Item | Example Question |
|------|------------------|
| Framework | Are you using React / Vue / Next.js, etc.? |
| Styling Method | CSS / SCSS / Tailwind / CSS-in-JS, etc. |
| Source Location | Where are style files and components located? |
| Review Scope | Specific pages only or entire site? |

### 1.3 Automatic Project Detection

Attempt automatic detection from files in the workspace:

The rest: https://github.com/Galaxy-Dawn/claude-scholar/blob/HEAD/skills/web-design-reviewer/SKILL.md