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 ```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, ...