web-design-reviewerby GitHub

Web Design Reviewer Skill.

A Claude Code and Codex skill for design review: visually inspects a running website and locates and fixes layout issues.

Design Review & Accessibility
Review report

Download OpenDesign View usage guide

github/awesome-copilot · skills/web-design-reviewer/SKILL.mdSKILL.md

--- name: web-design-reviewer description: 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. --- ## Scope of Application ## Prerequisites ## Step 1: Information Gathering Phase ## Step 2: Visual Inspection Phase ## Step 3: Issue Fixing Phase ## Step 4: Re-verification Phase

Front matter and section headings read from the upstream file on 2026-09-14 · 10,577 characters in full

01 What it does

What the web-design-reviewer Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Web Design Reviewer drives a running website through a browser automation tool, inspects it visually, and repairs what it finds in the source code. It covers static sites, SPAs on React, Vue, Angular or Svelte, full-stack frameworks like Next.js and Nuxt, CMS platforms such as WordPress and Drupal, and any other web application.

The workflow is four phases: gather context and auto-detect the framework and styling method, inspect pages against a visual checklist, fix issues prioritised P1 to P3, then re-verify and loop. Findings are grouped as layout, responsive, accessibility and visual consistency, each with a severity. Fixes follow minimal-change principles and end in a markdown review report.

What it produces

A markdown review results report titled Web Design Review Results.
A summary table covering target URL, detected framework, styling, tested viewports, issues detected and issues fixed.
Per-issue entries carrying priority, page, element, description, fixed file path, fix details and before/after screenshots.
An unfixed issues section giving the reason each issue was left and a recommended action for the user, plus general recommendations.

See the example prompt ↗

How It Works

01
Gather Context and Detect the Stack
It asks for the URL if none is given, then attempts automatic detection from workspace files such as package.json, tsconfig.json, tailwind.config, next.config, vite.config and nuxt.config, and asks which pages are in scope.
02
Navigate and Capture
It opens the target URL, takes screenshots, retrieves the DOM structure or snapshot when possible, and traverses further pages through the site navigation.
03
Inspect Against the Visual Checklist
Layout, responsive, accessibility and visual consistency problems are checked by working through a reference checklist, which is used again after fixes.
04
Locate the Source of Each Problem
Problematic elements are traced to source by searching the codebase for class names or IDs, by finding the component from element text or structure, and by filtering style, component and page file patterns.
05
Fix, Then re-verify
Fixes are applied following framework-specific guidance, then the browser is reloaded or the dev server HMR is awaited, fixed areas are re-screenshotted, and before and after are compared.

02 Find your fit

When to Use the web-design-reviewer Skill

Use the web-design-reviewer skill in Claude Code or Codex when the job is design review of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

Reviewing a static site built with plain HTML, CSS and JS.
Reviewing a single-page app on React, Vue, Angular or Svelte.
Reviewing a full-stack framework app such as Next.js, Nuxt or SvelteKit.
Reviewing a CMS-driven site such as a WordPress or Drupal install.
Checking a local development server running at something like http://localhost:3000 during development.

Know the Boundaries

Production environments are only supported for read-only reviews, so changes cannot be applied there.
Fixes require the project source to exist within the workspace, so a remote site with no local code cannot be repaired.
Large-scale refactoring without user confirmation is explicitly listed as something not to do.
Fixes that ignore performance are listed as an anti-pattern.

What to Provide

The URL of the site to reviewIt is required for navigation; if the user does not supply it, the skill asks for it, with http://localhost:3000 as the example form.
Framework and styling locationThe skill asks which framework and styling method are used and where style files and components live, so it can find the right edit target.
Review scopeThe user states whether the review covers specific pages only or the entire site.

03 Inside the skill

Rules the web-design-reviewer Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

Stop After Three Attempts
The skill sets an iteration limit: if a specific issue needs more than 3 fix attempts, it must consult the user instead of continuing.
One Issue at a Time
Each issue is fixed individually and verified before moving on, rather than batching changes.
Screenshot Before Touching Code
Screenshots of the broken state must always be saved before fixes are made, so before and after can be compared.
Only Minimum Changes
The fix principle is to make only the minimum change necessary to resolve the issue, respecting existing code style and avoiding breaking changes elsewhere.
Work the Priority Matrix
Layout issues affecting functionality are P1 and fixed immediately, visual issues degrading UX are P2 and fixed next, minor visual inconsistencies are P3 and fixed if possible.
Test Four Viewports
Responsive checks run at 375px (Mobile, iPhone SE/12 mini), 768px (Tablet, iPad), 1280px (Desktop) and 1920px (Wide).
Respect Existing Patterns
Fixes must follow the existing code style already used in the project rather than introducing a new convention.
Confirm Before Major Changes
Large-scale refactoring is not done unilaterally: the user is asked to confirm before major changes, and multiple issues are not fixed at once because that is hard to verify.

04 Put it to work

Install web-design-reviewer in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add web-design-reviewer to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal

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

Generic skills CLI form for skills/web-design-reviewer/SKILL.md; the repository may document its own path.

Give the Skill a First Design Review Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt

Review the design of the website running at http://localhost:3000. It is a [Next.js] app styled with [Tailwind CSS], please check the [home and pricing] pages at mobile and desktop widths. Find the layout, responsive and accessibility problems like element overflow, weak contrast or tiny touch targets, then fix them in the source and verify the fixes.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

Reload the browser or wait for the development server HMR, then capture screenshots of the fixed areas.
Compare the before and after screenshots for each fixed element.
Run regression testing to verify the fixes have not affected other areas.
Confirm the responsive display is still intact after the change.
Read browser console messages to catch JavaScript errors, via the browser_console_messages tool in the Playwright reference setup.

In OpenDesign import web-design-reviewer from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesign Read the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill file: skills/web-design-reviewer/SKILL.md Content checksum recorded at verification; commit 1899b18
License: MIT From LICENSE.
Repository stars: 38,981 GitHub snapshot taken 2026-09-14 for the whole github/awesome-copilot repository, which contains 6 skills in this catalog. Not a rating or usage count for web-design-reviewer.
Verified by OpenDesign: 2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

Scope of ApplicationLists static sites, SPA and full-stack frameworks, CMS platforms and other web apps it covers.
PrerequisitesA running target site, browser automation with screenshot and DOM access, and source code for fixes.
Step 1: Information Gathering PhaseConfirms the URL, asks about framework, styling and scope, auto-detects config files and styling method.
Step 2: Visual Inspection PhaseTraverses pages, screenshots, checks layout, responsive, accessibility and consistency issues at four viewports.
Step 3: Issue Fixing PhasePrioritises P1 to P3, finds source files by selector, component or pattern, applies framework-specific minimal fixes.
Step 4: Re-verification PhaseReloads, re-screenshots, compares before and after, regression tests, loops back if issues remain.
Output FormatDefines the markdown review report template with summary table, issues, unfixed items and recommendations.
Required CapabilitiesTabulates navigation, screenshot, image analysis, DOM retrieval, file read/write and code search.
Reference ImplementationMaps capabilities to Playwright MCP tools, gives an MCP server config, and lists other compatible tools.
Best PracticesDO and DON'T lists: save screenshots, fix one at a time, no bulk refactoring without confirmation.
TroubleshootingCovers style files not found, fixes not reflected, and fixes affecting other areas.

The Skill's Own Description

“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.”

Front-matter description from SKILL.md. The full file is about 10,577 characters. Read the full file on GitHub.

06 Before you install

Questions About the web-design-reviewer Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

Does the site have to be running before I start?

Yes. The first required prerequisite is a running target, whether that is a local development server, a staging environment or production for read-only reviews.

Browser automation with screenshot capture, page navigation and DOM retrieval is also required, and fixes need the project to exist in the workspace.

Does it change my code or just report problems?

It performs fixes at the source code level, editing whichever layer matches the project's styling method: className in components for Tailwind, module CSS files for CSS Modules, plain CSS or SCSS files, and JS/TS files for styled-components and Emotion. If it cannot fix something, the report lists the reason and a recommended action.

Which browser automation tool does it need?

Playwright MCP is recommended as the reference implementation, with tools for navigation, snapshot, screenshot, click, resize and console messages. The workflow also works with Selenium, Puppeteer, Cypress or WebDriver BiDi as long as navigation, screenshots and DOM retrieval are available.

Web Design Reviewer

Run web-design-reviewer on a Real Design Review Task.

Download OpenDesign, import web-design-reviewer from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesign Browse all skills