web-design-reviewer

Name: web-design-reviewer
Availability: InStock
Author: living-relation

Inspect website screenshots and apply source-code fixes for design defects.

Updated Aug 27, 2026

Search Tags:#accessibility #ui review #web design #playwright #responsive testing #layout fixes #code-level remediation

Ready to run

npx skills add https://github.com/living-relation/tailormade --skill web-design-reviewer-living-relation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/living-relation/tailormade/tree/main/.agents/skills/web-design-reviewer
Command: npx skills add https://github.com/living-relation/tailormade --skill web-design-reviewer-living-relation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you detect visual, accessibility, and responsive design problems in a website and resolves many issues directly in the underlying source code.

Core Features & Use Cases

Visual inspection with screenshots: Traverse pages, capture visuals, and inspect layout/typography/color/contrast issues.
Responsive QA across viewports: Validate behavior at mobile, tablet, desktop, and wide resolutions to catch breakpoint and touch-target problems.
Source-level fixes and re-verification: Identify the problematic source files (via framework- and styling-aware search) apply minimal targeted changes, then re-check the affected areas.

Quick Start

Ask the agent to review and fix the UI of your running site by providing the target URL you want to test.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema

How do I find and fix website UI issues in my source code?▼

To fix website UI issues, automated visual inspection captures screenshots to detect layout and contrast problems, then targeted source-code edits apply minimal re-verifiable fixes directly to your framework files.

Does automated responsive testing work with SPA and full-stack frameworks?▼

Responsive testing works with SPA, full-stack, and CMS frameworks when the site is reachable for browser automation, validating behavior across mobile, tablet, desktop, and wide viewports to catch touch-target problems.

Can I automate accessibility checks and layout fixes for a staging site?▼

You can automate accessibility checks and layout fixes for staging sites by navigating pages via browser automation, retrieving the DOM, and applying code-level remediation to the underlying styling files.

What is the best way to review web design defects across different viewports?▼

Reviewing web design defects across viewports involves traversing pages to capture visuals, inspecting typography and color contrast, and validating breakpoint behavior before applying minimal code-level remediation.

Why does web design review require browser navigation and DOM retrieval?▼

Web design review requires browser navigation and DOM retrieval to capture accurate visuals and inspect the live DOM structure, enabling framework-aware search to locate and fix problematic source files.

Do I need Playwright to run automated visual inspection on my website?▼

Playwright is used for browser automation to navigate pages and capture screenshots, which is necessary for automated visual inspection and responsive testing across your running local or production site.