Web Design Reviewer

GitHubOfficialFirst committed by ks6088tsDistributed by GitHub

Skill
Workflow
Software development
MIT
No issues found

From the author

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.

— the description by ks6088ts

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The Web Design Reviewer is a workflow-based skill that performs visual inspections of web applications to identify and resolve design, layout, and accessibility issues. It operates by navigating to a target URL, capturing visual data, comparing it against a checklist, and applying specific fixes directly to the project's source code. The skill supports various frameworks and styling methods, including CSS, Tailwind, and CSS-in-JS, and provides a structured report of detected and resolved issues.

What it does

Performs automated visual inspection of websites via browser navigation and screenshot capture.
Identifies layout, responsive design, accessibility, and visual consistency issues.
Maps detected issues to specific source code files for targeted remediation.
Applies code-level fixes based on framework-specific styling patterns.
Conducts post-fix verification and regression checks to ensure stability.
Generates a detailed report summarizing the review, fixes applied, and remaining recommendations.

When to use it

When you need to identify and fix layout breakage or responsive design issues.
When auditing a web application for visual consistency and accessibility gaps.
When you require a systematic approach to debugging UI elements across different viewports.
When you need to apply standardized styling fixes to a project's codebase.

Advantages

Reduces manual effort in identifying visual and layout discrepancies.
Provides a structured, repeatable workflow for UI maintenance.
Supports a wide range of modern web frameworks and styling methodologies.
Ensures fixes are verified through automated re-inspection and comparison.

Usage examples

“Review the design of my website at http://localhost:3000 and fix any layout issues.”: The agent will navigate to the URL, inspect the layout for overflows or alignment problems, and apply necessary CSS or component-level fixes to the source code.
“Check the UI for responsive issues on mobile.”: The agent will simulate a mobile viewport, identify elements that break or overflow, and suggest or apply code changes to improve mobile responsiveness.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/web-design-reviewer/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip web-design-reviewer.zip -d .agents/skills

Documentation by ks6088ts

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]

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

Navigate to the specified URL
Capture screenshots
Retrieve DOM structure/snapshot (if possible)
If additional pages exist, traverse through navigation

2.2 Inspection Items

Work through references/visual-checklist.md during inspection and again during post-fix verification.

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	Medium
Color Inconsistency	Non-unified brand colors	Medium
Spacing Inconsistency	Non-uniform spacing between similar elements	Low

2.3 Viewport Testing (Responsive)

Test at the following viewports:

Name	Width	Representative Device
Mobile	375px	iPhone SE/12 mini
Tablet	768px	iPad
Desktop	1280px	Standard PC
Wide	1920px	Large display

Step 3: Issue Fixing Phase

3.1 Issue Prioritization

block-beta
    columns 1
    block:priority["Priority Matrix"]
        P1["P1: Fix Immediately\n(Layout issues affecting functionality)"]
        P2["P2: Fix Next\n(Visual issues degrading UX)"]
        P3["P3: Fix If Possible\n(Minor visual inconsistencies)"]
    end

3.2 Identifying Source Files

Identify source files from problematic elements:

Selector-based Search
- Search codebase by class name or ID
- Explore style definitions with grep_search
Component-based Search
- Identify components from element text or structure
- Explore related files with semantic_search

File Pattern Filtering

Style files: src/**/*.css, styles/**/*
Components: src/components/**/*
Pages: src/pages/**, app/**

3.3 Applying Fixes

Framework-specific Fix Guidelines

See references/framework-fixes.md for details.

Fix Principles

Minimal Changes: Only make the minimum changes necessary to resolve the issue
Respect Existing Patterns: Follow existing code style in the project
Avoid Breaking Changes: Be careful not to affect other areas
Add Comments: Add comments to explain the reason for fixes where appropriate

Step 4: Re-verification Phase

4.1 Post-fix Confirmation

Reload browser (or wait for development server HMR)
Capture screenshots of fixed areas
Compare before and after

4.2 Regression Testing

Verify that fixes haven't affected other areas
Confirm responsive display is not broken

4.3 Iteration Decision

flowchart TD
    A{Issues Remaining?}
    A -->|Yes| B[Return to Step 2]
    A -->|No| C[Proceed to Completion Report]

Iteration Limit: If more than 3 fix attempts are needed for a specific issue, consult the user

Output Format

Review Results Report

# Web Design Review Results

## Summary

| Item | Value |
|------|-------|
| Target URL | {URL} |
| Framework | {Detected framework} |
| Styling | {CSS / Tailwind / etc.} |
| Tested Viewports | Desktop, Mobile |
| Issues Detected | {N} |
| Issues Fixed | {M} |

## Detected Issues

### [P1] {Issue Title}

- **Page**: {Page path}
- **Element**: {Selector or description}
- **Issue**: {Detailed description of the issue}
- **Fixed File**: `{File path}`
- **Fix Details**: {Description of changes}
- **Screenshot**: Before/After

### [P2] {Issue Title}
...

## Unfixed Issues (if any)

### {Issue Title}
- **Reason**: {Why it was not fixed/could not be fixed}
- **Recommended Action**: {Recommendations for user}

## Recommendations

- {Suggestions for future improvements}

Required Capabilities

Capability	Description	Required
Web Page Navigation	Access URLs, page transitions	✅
Screenshot Capture	Page image capture	✅
Image Analysis	Visual issue detection	✅
DOM Retrieval	Page structure retrieval	Recommended
File Read/Write	Source code reading and editing	Required for fixes
Code Search	Code search within project	Required for fixes

Reference Implementation

Implementation with Playwright MCP

Playwright MCP is recommended as the reference implementation for this skill.

Capability	Playwright MCP Tool	Purpose
Navigation	`browser_navigate`	Access URLs
Snapshot	`browser_snapshot`	Retrieve DOM structure
Screenshot	`browser_take_screenshot`	Images for visual inspection
Click	`browser_click`	Interact with interactive elements
Resize	`browser_resize`	Responsive testing
Console	`browser_console_messages`	Detect JS errors

Configuration Example (MCP Server)

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

Other Compatible Browser Automation Tools

Tool	Features
Selenium	Broad browser support, multi-language support
Puppeteer	Chrome/Chromium focused, Node.js
Cypress	Easy integration with E2E testing
WebDriver BiDi	Standardized next-generation protocol

The same workflow can be implemented with these tools. As long as they provide the necessary capabilities (navigation, screenshot, DOM retrieval), the choice of tool is flexible.

Best Practices

DO (Recommended)

✅ Always save screenshots before making fixes
✅ Fix one issue at a time and verify each
✅ Follow the project's existing code style
✅ Confirm with user before major changes
✅ Document fix details thoroughly

DON'T (Not Recommended)

❌ Large-scale refactoring without confirmation
❌ Ignoring design systems or brand guidelines
❌ Fixes that ignore performance
❌ Fixing multiple issues at once (difficult to verify)

Troubleshooting

Problem: Style files not found

Check dependencies in package.json
Consider the possibility of CSS-in-JS
Consider CSS generated at build time
Ask user about styling method

Problem: Fixes not reflected

Check if development server HMR is working
Clear browser cache
Rebuild if project requires build
Check CSS specificity issues

Problem: Fixes affecting other areas

Rollback changes
Use more specific selectors
Consider using CSS Modules or scoped styles
Consult user to confirm impact scope

Files

ATTRIBUTION.mdAdded by AutoGineer871 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md10.4 KiB
references/framework-fixes.md7.3 KiB
references/visual-checklist.md5.8 KiB

references/visual-checklist.md

Visual Inspection Checklist

This document is a comprehensive checklist of items to verify during web design visual inspection.

1. Layout Verification

Structural Integrity

[ ] Header is correctly fixed/positioned at the top of the screen
[ ] Footer is positioned at the bottom of the screen or end of content
[ ] Main content area is center-aligned with appropriate width
[ ] Sidebar (if present) is positioned correctly
[ ] Navigation is displayed in the intended position

Overflow

[ ] Horizontal scrollbar is not unintentionally displayed
[ ] Content does not overflow from parent elements
[ ] Images fit within parent containers
[ ] Tables do not exceed container width
[ ] Code blocks wrap or scroll appropriately

Alignment

[ ] Grid items are evenly distributed
[ ] Flex item alignment is correct
[ ] Text alignment (left/center/right) is consistent
[ ] Icons and text are vertically aligned
[ ] Form labels and input fields are correctly positioned

2. Typography Verification

Readability

[ ] Body text font size is sufficient (minimum 16px recommended)
[ ] Line height is appropriate (1.5-1.8 recommended)
[ ] Characters per line is appropriate (40-80 characters recommended)
[ ] Spacing between paragraphs is sufficient
[ ] Heading size hierarchy is clear

Text Handling

[ ] Long words wrap appropriately
[ ] URLs and code are handled properly
[ ] No text clipping occurs
[ ] Ellipsis (...) displays correctly
[ ] Language-specific line breaking rules work correctly

Fonts

[ ] Web fonts load correctly
[ ] Fallback fonts are appropriate
[ ] Font weights are as intended
[ ] Special characters and emoji display correctly

3. Color & Contrast Verification

Accessibility (WCAG Standards)

[ ] Body text: Contrast ratio 4.5:1 or higher (AA)
[ ] Large text (18px+ bold or 24px+): 3:1 or higher
[ ] Interactive element borders: 3:1 or higher
[ ] Focus indicators: Sufficient contrast with background

Color Consistency

[ ] Brand colors are unified
[ ] Link colors are consistent
[ ] Error state red is unified
[ ] Success state green is unified
[ ] Hover/active state colors are appropriate

Color Vision Diversity

[ ] Information conveyed by shape and text, not just color
[ ] Charts and diagrams consider color vision diversity
[ ] Error messages don't rely solely on color

4. Responsive Verification

Mobile (~640px)

[ ] Content fits within screen width
[ ] Touch targets are 44x44px or larger
[ ] Text is readable size
[ ] No horizontal scrolling occurs
[ ] Navigation is mobile-friendly (hamburger menu, etc.)
[ ] Form inputs are easy to use

Tablet (641px~1024px)

[ ] Layout is optimized for tablet
[ ] Two-column layouts display appropriately
[ ] Image sizes are appropriate
[ ] Sidebar show/hide is appropriate

Desktop (1025px~)

[ ] Maximum width is set and doesn't break on extra-large screens
[ ] Spacing is sufficient
[ ] Multi-column layouts function correctly
[ ] Hover states are implemented

Breakpoint Transitions

[ ] Layout transitions smoothly when screen size changes
[ ] Layout doesn't break at intermediate sizes
[ ] No content disappears or duplicates

5. Interactive Element Verification

Buttons

[ ] Default state is clear
[ ] Hover state exists (desktop)
[ ] Focus state is visually clear
[ ] Active (pressed) state exists
[ ] Disabled state is distinguishable
[ ] Loading state (if applicable)

Form Elements

[ ] Input field boundaries are clear
[ ] Placeholder text contrast is appropriate
[ ] Visual feedback on focus
[ ] Error state display
[ ] Required field indication
[ ] Dropdowns function correctly

6. Images & Media Verification

Images

[ ] Images display at appropriate size
[ ] Aspect ratio is maintained
[ ] High resolution display support (@2x)
[ ] Display when image fails to load
[ ] Lazy loading behavior works

Video & Embeds

[ ] Videos fit within containers
[ ] Aspect ratio is maintained
[ ] Embedded content is responsive
[ ] iframes don't overflow

7. Accessibility Verification

[ ] All interactive elements accessible via Tab key
[ ] Focus order is logical
[ ] Focus traps are appropriate (modals, etc.)
[ ] Skip to content link exists

[ ] Images have alt text
[ ] Forms have labels
[ ] ARIA labels are appropriately set
[ ] Heading hierarchy is correct (h1→h2→h3...)

Motion

[ ] Animations are not excessive
[ ] prefers-reduced-motion is supported (if possible)

Loading

[ ] Font FOUT/FOIT is minimal
[ ] No layout shift (CLS) occurs
[ ] No jumping when images load
[ ] Skeleton screens are appropriate (if applicable)

Animation

[ ] Animations are smooth (60fps)
[ ] No performance issues when scrolling
[ ] Transitions are natural

Priority Matrix

Priority	Category	Examples
P0 (Critical)	Functionality breaking	Complete element overlap, content disappearance
P1 (High)	Serious UX issues	Unreadable text, inoperable buttons
P2 (Medium)	Moderate issues	Alignment issues, spacing inconsistencies
P3 (Low)	Minor issues	Slight positioning differences, minor color variations

Verification Tools

Browser DevTools

Elements panel: DOM and style inspection
Lighthouse: Performance and accessibility audits
Device toolbar: Responsive testing

Accessibility Tools

axe DevTools
WAVE
Color Contrast Analyzer

Automation Tools

Playwright (screenshot comparison)
Percy / Chromatic (Visual Regression Testing)

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by

ks6088ts

Publisher

GitHub (Official)

Distributed by

GitHub

Source

github/awesome-copilot · skills/web-design-reviewer · commit 797337f

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

Contributors

ks6088ts, stbenjam

AutoGineer is not affiliated with or endorsed by ks6088ts or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download web-design-reviewer.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by ks6088ts

Web Design Reviewer

Scope of Application

Prerequisites

Required

Workflow Overview

Step 1: Information Gathering Phase

1.1 URL Confirmation

1.2 Understanding Project Structure

1.3 Automatic Project Detection

1.4 Identifying Styling Method

Step 2: Visual Inspection Phase

2.1 Page Traversal

2.2 Inspection Items

Layout Issues

Responsive Issues

Accessibility Issues

Visual Consistency

2.3 Viewport Testing (Responsive)

Step 3: Issue Fixing Phase

3.1 Issue Prioritization

3.2 Identifying Source Files

3.3 Applying Fixes

Framework-specific Fix Guidelines

Fix Principles

Step 4: Re-verification Phase

4.1 Post-fix Confirmation

4.2 Regression Testing

4.3 Iteration Decision

Output Format

Review Results Report

Required Capabilities

Reference Implementation

Implementation with Playwright MCP

Configuration Example (MCP Server)

Other Compatible Browser Automation Tools

Best Practices

DO (Recommended)

DON'T (Not Recommended)

Troubleshooting

Problem: Style files not found

Problem: Fixes not reflected

Problem: Fixes affecting other areas

Files

references/visual-checklist.md

Visual Inspection Checklist

1. Layout Verification

Structural Integrity

Overflow

Alignment

2. Typography Verification

Readability

Text Handling

Fonts

3. Color & Contrast Verification

Accessibility (WCAG Standards)

Color Consistency

Color Vision Diversity

4. Responsive Verification

Mobile (~640px)

Tablet (641px~1024px)

Desktop (1025px~)

Breakpoint Transitions

5. Interactive Element Verification

Buttons

Links

Form Elements

6. Images & Media Verification

Images

Video & Embeds

7. Accessibility Verification

Keyboard Navigation

Screen Reader Support