Web-Design-Reviewer

# 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

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:

Detection targets:
├── package.json     → Framework and dependencies
├── tsconfig.json    → TypeScript usage
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ or app/     → Source directory

1.4 Identifying Styling Method

| Method | Detection | Edit Target |

|--------|-----------|-------------|

| Pure CSS | `*.css` files | Global CSS or component CSS |

| SCSS/Sass | `*.scss`, `*.sass` | SCSS files |

| CSS Modules | `*.module.css` | Module CSS files |

| Tailwind CSS | `tailwind.config.*` | className in components |

| styled-components | `styled.` in code | JS/TS files |

| Emotion | `@emotion/` imports | JS/TS files |

| CSS-in-JS (other) | Inline styles | JS/TS files |

---

Step 2: Visual Inspection Phase

2.1 Page Traversal

1. Navigate to the specified URL

2. Capture screenshots

3. Retrieve DOM structure/snapshot (if possible)

4. If additional pages exist, traverse through navigation

2.2 Inspection Items

#### Layout Issues

| Issue | Description | Severity |

|-------|-------------|----------|

| Element Overflow | Content overflows from parent element or viewport | High |

| Element Overlap | Unintended overlapping of elements | High |

| Alignment Issues | Grid or flex alignment problems | Medium |

| Inconsistent Spacing | Padding/margin inconsistencies | Medium |

| Text Clipping | Long text not handled properly | Medium |

#### Responsive Issues

| Issue | Description | Severity |

|-------|-------------|----------|

| Non-mobile Friendly | Layout breaks on small screens | High |

| Breakpoint Issues | Unnatural transitions when screen size changes | Medium |

| Touch Targets | Buttons too small on mobile | Medium |

#### Accessibility Issues

| Issue | Description | Severity |

|-------|-------------|----------|

| Insufficient Contrast | Low contrast ratio between text and background | High |

| No Focus State | Cannot determine state during keyboard navigation | High |

| Missing alt Text | No alternative text for images | Medium |

#### Visual Consistency

| Issue | Description | Severity |

|-------|-------------|----------|

| Font Inconsistency | Mixed font families | Me