web-design-reviewer

Q: How do I install web-design-reviewer?

Run npx skills add https://smithery.ai --skill web-design-reviewer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-design-reviewer/ (personal) or .claude/skills/web-design-reviewer/ (project).

by smithery.aiFrontend & Design

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.

Installs: 675
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://smithery.ai --skill web-design-reviewer

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads web-design-reviewer automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the web-design-reviewer skill do?

How do I install web-design-reviewer?

Run npx skills add https://smithery.ai --skill web-design-reviewer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-design-reviewer/ (personal) or .claude/skills/web-design-reviewer/ (project).

Which AI agents can use web-design-reviewer?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is web-design-reviewer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains web-design-reviewer?

It is published by smithery.ai in smithery.ai. It has 675 recorded installs.

More from smithery.ai

View all →

smithery-ai-cli

smithery.ai

Find, connect, and use MCP tools and skills via the Smithery CLI. Use when the user searches for new tools or skills, wants to discover integrations, connect to an MCP, install a skill, or wants to interact with an external service (email, Slack, Discord, GitHub, Jira, Notion, databases, cloud APIs, monitoring, etc.).

Productivity & Automation8K installs

frontend-design

smithery.ai

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Frontend & Design6.4K installs

skill-creator

smithery.ai

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Gemini CLI's capabilities with specialized knowledge, workflows, or tool integrations.

AI & Agents2.6K installs

ui-ux-pro-max

smithery.ai

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

Frontend & Design1.3K installs

pdf

smithery.ai

Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.

Docs & Writing1.3K installs

xlsx

smithery.ai

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.

Data & Databases984 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

web-design-reviewer

Install

Install

Describe the task

Review the result

SKILL.md

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

FAQ

More from smithery.ai

Popular frontend & design skills