web-design-reviewer
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.
Profile →npx skills add github/awesome-copilot --skill web-design-reviewer --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 re
- 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
What does the web-design-reviewer skill do?
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.
How do I install it?
Run `npx skills add github/awesome-copilot --skill web-design-reviewer --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.