What is the web-design-reviewer skill?
The web-design-reviewer skill is a SKILL.md in awesome-copilot for visual inspection. Your agent opens a running site through browser automation, captures screenshots at four viewport widths, flags layout, responsive, accessibility and consistency issues, fixes them in source code, then re-checks and writes a report.
The web-design-reviewer skill is a folder in the awesome-copilot repository. It makes an agent look at a website the way a person would, through screenshots, then trace each problem back to the style or component file that causes it.
The scope is broad: static sites, React, Vue, Angular and Svelte apps, Next.js, Nuxt and SvelteKit, and CMS platforms such as WordPress and Drupal. The site can run locally, on staging or in production for read-only reviews.
How a review runs
- Gather information: confirm the URL, and detect the framework and styling method from files such as package.json and tailwind config.
- Inspect visually: navigate, capture screenshots, read the DOM where possible, and test at 375, 768, 1280 and 1920 pixel widths.
- Fix at source: rank issues P1 to P3, find the file by selector or component, and make minimal changes that follow existing patterns.
- Re-verify: reload, capture the fixed areas, compare before and after, and loop until nothing remains.
What it looks for
- Layout: overflow, overlap, alignment, inconsistent spacing and text clipping.
- Responsive: layouts that break on small screens, awkward breakpoints and small touch targets.
- Accessibility: low contrast, missing focus states and missing alt text.
- Consistency: mixed fonts, uneven brand colors and non-uniform spacing.
Who the web-design-reviewer skill is for
Best for
- A running page that looks wrong and needs the cause found in code, including WordPress themes.
- Before and after proof, since the workflow saves screenshots before each fix.
- Teams that already use a browser tool such as Playwright MCP, the reference setup in SKILL.md. Related: an accessibility fixer.
Not for
- Sites with no browser automation available. Screenshot capture and navigation are required.
- Pure code review with no running page. For that, see web quality audit.
- Large refactors. The skill says to avoid them without confirming with you first. Related: web design guidelines.
Use it with UiChemy
A page that UiChemy built for WordPress is still a live site with a front end you can open. Point the reviewer at its URL to catch spacing or contrast faults, then adjust in Composer. Click Get Started on uichemy.com.
How to install Web Design Reviewer Skill: Find and Fix UI Bugs Visually
git clone https://github.com/github/awesome-copilot.gitClone the repository
Run
git clone https://github.com/github/awesome-copilot.git. The skill sits in skills/web-design-reviewer.Copy the folder with its references
Copy skills/web-design-reviewer into the place your agent loads skills from. Keep the references folder, which holds visual-checklist.md and framework-fixes.md.
Enable browser automation
The skill needs screenshot capture, navigation and DOM retrieval. SKILL.md recommends Playwright MCP and shows
npx -y @playwright/mcp@latest --caps=visionas its server command.Start the site and ask
Run your local dev server, then ask to review the website design, check the UI, fix the layout or find design problems, and give the URL.
Check that it loaded
Ask the agent to review a running page. It should take screenshots, report issues by priority, edit source files, and re-capture the page to confirm each fix.
Key features
- Visual inspection from screenshotsThe agent navigates to the URL, captures screenshots and, if possible, a DOM snapshot, then traverses further pages through the navigation.
- Four test viewportsMobile at 375px, tablet at 768px, desktop at 1280px and wide at 1920px are checked for responsive problems.
- Severity ratingsEach issue type carries a High, Medium or Low severity, such as High for element overflow and insufficient contrast.
- Framework and style detectionpackage.json, tsconfig, tailwind, next, vite and nuxt configs reveal the stack, and the styling method decides which files get edited.
- Priority matrixP1 fixes layout issues that affect function, P2 fixes visual issues that hurt UX, and P3 covers minor inconsistencies.
- Minimal, pattern-following fixesThe skill asks for the smallest change that works, respect for existing code style and care not to break other areas.
- Re-verification loopAfter each fix the agent reloads, screenshots, compares and checks for regressions. After more than three attempts on one issue it consults you.
- Structured reportThe output lists target URL, framework, styling, viewports, issues detected and fixed, unfixed issues with reasons, and recommendations.
- Bundled checklistsreferences/visual-checklist.md is used during inspection and after fixes, and references/framework-fixes.md holds framework-specific guidance.
- Playwright MCP reference setupThe skill documents browser_navigate, browser_snapshot, browser_take_screenshot, browser_click, browser_resize and browser_console_messages as the tools used.
Frequently asked questions
What is the web-design-reviewer skill?
It is a skill in the awesome-copilot repository that lets an AI coding agent inspect a website visually. The agent screenshots a running page at several widths, finds layout, responsive, accessibility and consistency issues, fixes them in the source files, and checks the result again.
How do I install the web-design-reviewer skill?
Clone github/awesome-copilot and copy the skills/web-design-reviewer folder, including its references folder, into the place your agent loads skills from. Then enable a browser automation tool such as Playwright MCP, start your site, and ask the agent to review the design at that URL.
What browser tools does web-design-reviewer need?
It needs screenshot capture, page navigation and ideally DOM retrieval. Playwright MCP is the reference implementation. Selenium, Puppeteer, Cypress and WebDriver BiDi are listed as compatible, as long as they can navigate, capture screenshots and read the DOM.
Which viewport sizes does web-design-reviewer test?
It tests mobile at 375 pixels, tablet at 768, desktop at 1280 and wide at 1920. These stand in for an iPhone SE or 12 mini, an iPad, a standard PC and a large display. The skill asks for them during the visual inspection phase and again after fixes.
Can web-design-reviewer review a WordPress site?
Yes in scope. SKILL.md lists CMS platforms such as WordPress and Drupal alongside static sites and frameworks. Fixes happen at the source code level, so you need project files in the workspace. For a production site it runs as a read-only review.
Does web-design-reviewer fix problems automatically?
It fixes them, one at a time. The skill tells the agent to make minimal changes, follow existing patterns, confirm with you before major changes and verify each fix with a new screenshot. If more than three attempts are needed on one issue, it asks you.
Which agents work with web-design-reviewer?
The skill names no specific agent. It requires an agent that can run browser automation, read and edit files and search code. Claude Code, Copilot and others with those abilities can follow it, though SKILL.md only documents Playwright MCP tool names.