Web Design Reviewer Skill (awesome-copilot) for Claude

Makes Claude look at a running website, spot layout and accessibility problems, and fix them in your code, for front-end developers.

Installs: 14.1K; on skills.sh
Stars: 40.7K; on GitHub
Files: 2; besides SKILL.md
Updated: Oct 2026; last repo commit

web-design-reviewer makes Claude open a website, take screenshots at four screen widths, and list design problems such as overflow, overlap, low contrast and missing focus states. It then finds the style or component file behind each problem, makes a small fix, checks the page again and writes a report.

It triggers on requests like "review website design", "check the UI" and "fix the layout". The site must already be running, and Claude needs a browser automation tool. The skill suggests Playwright MCP. After more than 3 failed fix attempts on one issue, it asks you.

Good for

Front-end developers checking a page before release
Designers who want broken layouts and contrast issues listed with severity
Anyone who needs a mobile, tablet and desktop check without clicking through each size

Install web-design-reviewer

Claude Code

Copy this prompt.

Install the web-design-reviewer skill in Claude Code. Run this command:

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

The skill needs a browser automation tool to look at the site. Playwright MCP is the reference setup in SKILL.md.

From the vendor's docs. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

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
2.3 Viewport Testing (Responsive)
Step 3: Issue Fixing Phase
3.1 Issue Prioritization
3.2 Identifying Source Files

Key facts

Author: github/awesome-copilot (community collection)
Repository: github/awesome-copilot
Installs on skills.sh: 14,081 as of 2026-11-02
GitHub stars: 40,666 for the whole github/awesome-copilot repo
Last repo commit: 2026-10-30
What is inside: 3 files including SKILL.md: SKILL.md and 2 reference guides. It bundles no scripts.
Needs: A running site and a browser automation tool that can navigate and take screenshots; Playwright MCP is the suggested one

What it includes

Confirm the URL, framework and styling method
Asks for the URL if you did not give one, then detects the framework and styling from files such as package.json, tailwind.config and next.config.
Try: “Review the design of http://localhost:3000 and fix any layout problems you find.”
Read · Step 1: Gather information
Screenshots, DOM snapshot and an issue checklist
Navigates the pages, captures screenshots and the page structure, and checks layout, responsive, accessibility and consistency issues, each rated High, Medium or Low.
Network · Step 2: Visual inspection
375, 768, 1280 and 1920 pixels wide
Mobile, tablet, desktop and wide.
Read · Viewport tests
Edits the source files behind each problem
Ranks issues P1 to P3, finds the style or component file, and makes minimal changes that follow your existing code style.
Write · Step 3: Fix issues
Reload, compare before and after, check for regressions
Repeats the inspection after each fix. More than 3 attempts on one issue means asking you.
Read · Step 4: Re-verify
Summary table, issues with fixed files, unfixed issues
A Markdown report with the URL, framework, styling, viewports tested, counts of issues found and fixed, and recommendations.
Review report
8-section checklist for the inspection
Layout, typography, color and contrast, responsive, interactive elements, images and media, accessibility, and performance-related visual issues.
Read · references/visual-checklist.md
Fix patterns for 6 styling setups plus common patterns
Pure CSS and SCSS, Tailwind, React with CSS Modules, styled-components and Emotion, Vue scoped styles, and Next.js App Router.
Read · references/framework-fixes.md
Navigate, snapshot, screenshot, click, resize, console
The suggested setup uses browser_navigate, browser_snapshot, browser_take_screenshot, browser_click, browser_resize and browser_console_messages.
Runs code · Playwright MCP tools

From the official docs

Permissions

Medium risk

The skill edits your source files and controls a browser, and its suggested setup runs a package with npx. Run it on a branch and check the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your source code
Fixes are written straight to your style and component files. Work on a branch and review the diff before merging. github.com
The suggested setup runs a package with npx
The Playwright MCP example uses npx -y @playwright/mcp@latest, which fetches the newest version each time. Pin a version if you want repeatable runs. github.com
Page content reaches the assistant
Screenshots and DOM text are read by Claude. A page with hostile text could try to steer it, so point it at your own sites. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Production is listed as acceptable for read-only reviews; the skill says fixes need source access.
Talks to	The browser loads the URL you give it, including staging or production. Screenshots and page structure go into your AI conversation
Sign-in and keys	SKILL.md mentions no key.
Data retention	Screenshots are saved before fixes, per the skill.
Scopes	Claude opens the site you name in a browser and takes screenshots Claude edits style and component files in your workspace The suggested Playwright MCP setup runs npx -y @playwright/mcp@latest --caps=vision

Questions

What does the web-design-reviewer skill do?

It reviews a running website for layout, responsive, accessibility and consistency problems, fixes them in your source code, and checks the result. You get a report of what it found and changed.

How do I install it?

Use the install box at the top of this page. The skill is not enough alone: you also need a browser automation tool such as Playwright MCP, which the box shows.

Does it work on a live production site?

It can look at one. The skill lists production as acceptable for read-only reviews. Fixes need the source code to be in your workspace.

Does it need Playwright?

It needs some browser automation that can open pages, take screenshots and read the DOM. Playwright MCP is the recommended reference setup. Selenium, Puppeteer, Cypress and WebDriver BiDi are listed as options.

Will it change my code without asking?

It makes fixes itself, one issue at a time, with minimal changes. It says to confirm with you before major changes and to avoid large refactors without confirmation. Use version control so you can review the diff.

Is it safe?

It edits your source files and drives a browser, so run it on a branch and read the diff. It bundles no scripts, but the suggested Playwright setup starts a package with npx. The awesome-copilot README says its content comes from third-party developers.

Information

updated Nov 2, 2026

Repository: github/awesome-copilot
Folder: skills/web-design-reviewer

github/awesome-copilot skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

web-design-reviewer SKILL.md · github.com
skills CLI commands · github.com
framework-fixes.md · github.com
visual-checklist.md · github.com
github/awesome-copilot README · github.com