skills.rest
PracticalSwan
PracticalSwanCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect live websites for UI layout, responsive design, and CSS issues.

7|2|Updated Feb 20, 2026
Search Tags:#responsive design#qa#css#ui/ux#web design#visual inspection
One-click install
npx skills add https://github.com/PracticalSwan/agent-skills --skill web-design-reviewer-practicalswan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/PracticalSwan/agent-skills/tree/main/web-design-reviewer
Command: npx skills add https://github.com/PracticalSwan/agent-skills --skill web-design-reviewer-practicalswan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you identify and fix visual inconsistencies, layout issues, and CSS problems on live websites, ensuring a polished and professional user interface.

Core Features & Use Cases

  • Visual QA: Perform manual checks on UI layout, spacing, and responsiveness.
  • Source Code Diagnosis: Trace visual defects back to CSS, Tailwind, or component styles.
  • Use Case: After a developer deploys a new feature, use this Skill to visually confirm that the layout matches the design mockups across different screen sizes and that there are no CSS-related visual glitches.

Quick Start

Use the web-design-reviewer skill to visually inspect the website at https://example.com.

Frequently Asked Questions about web-design-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visually inspect a live website for UI layout and responsive design issues?▼

Visually inspect a live website by navigating to the URL, taking snapshots across different screen sizes, and checking console messages to identify UI layout and responsive design issues for rectification.

Can I trace visual defects back to CSS and component styles?▼

Yes, you can trace visual defects back to CSS, Tailwind, or component styles by performing source code diagnosis to pinpoint the exact cause of visual inconsistencies and layout problems.

Do I need Playwright to check my website's visual consistency and accessibility?▼

Yes, you need browser-based MCP tools like Playwright to perform visual inspection, as it handles navigation, snapshotting, resizing, and console message retrieval required for visual consistency and accessibility diagnostics.

What's the best way to perform visual QA on a newly deployed web feature?▼

Perform visual QA on a newly deployed feature by manually checking UI layout, spacing, and responsiveness against design mockups to confirm there are no CSS-related visual glitches across screen sizes.

Why does my web design look broken on different screen sizes?▼

Your web design may look broken due to CSS problems or a lack of responsive design. Perform a visual inspection and source code diagnosis to identify and rectify layout flaws and visual inconsistencies.

Are there limitations to automated visual inspection for web design?▼

Visual inspection focuses on UI layout, visual consistency, and CSS diagnostics at the source code level. It requires browser-based MCP tools like Playwright and performs manual checks rather than fully automated visual regression testing.

Related Skills

Explore More Design & Creative Skills→
nonputtipongnonputtipong

playwright-mcp

Automate live browser interactions via Playwright MCP server tools.

Community
Intermediate
rahmatullahbossrahmatullahboss

tailwind-patterns

Provide reusable Tailwind CSS patterns for responsive and accessible web interfaces.

Community
Intermediate
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced