skills.rest
BrunoAMSilva
BrunoAMSilvaCOMMUNITY
Explore all skills by this author →
GitHub

web-design-reviewer

Inspect and fix layout, accessibility and UI consistency issues in web applications.

Updated Apr 14, 2026
Search Tags:#accessibility#css#playwright#web-design#responsive-testing#visual-audit#ui-fix
One-click install
npx skills add https://github.com/BrunoAMSilva/my-config --skill web-design-reviewer-brunoamsilva
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/BrunoAMSilva/my-config/tree/main/coding/skills/web-design-reviewer
Command: npx skills add https://github.com/BrunoAMSilva/my-config --skill web-design-reviewer-brunoamsilva

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill streamlines the detection and remediation of visual and UX problems in websites by performing automated visual inspections, responsive testing, accessibility checks, and proposing or applying minimal source-level fixes to resolve layout, spacing, and consistency issues.

Core Features & Use Cases

  • Visual Inspection: Capture screenshots across viewports, traverse pages, and analyze DOM snapshots to locate overflow, overlap, alignment, and spacing problems.
  • Responsive & Accessibility Checks: Test representative breakpoints, verify touch targets and contrast ratios, and flag missing alt text and focus states.
  • Source-level Fixes: Identify affected CSS or component files and apply minimal, framework-aware changes for React, Vue, Next.js, Tailwind, and other setups, then re-verify with before/after comparisons.
  • Use Case: Run against a local development server to identify mobile layout breakage, implement targeted CSS or component fixes, and confirm resolution with screenshots.

Quick Start

Open the site URL and run a visual review, then generate a report listing detected issues and proposed code-level fixes.

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 layout and spacing issues automatically?▼

To find and fix website layout issues, you can run an automated visual inspection that captures screenshots across viewports, analyzes DOM snapshots for overflow or alignment problems, and applies minimal source-level CSS fixes.

Can I run responsive testing and accessibility checks on a React or Next.js application?▼

Yes, you can run responsive testing and accessibility checks on React, Next.js, Vue, Angular, Svelte, and SvelteKit applications, verifying touch targets, contrast ratios, and missing focus states across representative breakpoints.

What's the best way to perform a visual audit of my web application?▼

The best way to perform a visual audit is to use browser automation to capture screenshots and retrieve DOM elements, detecting visual consistency problems like overlap and spacing issues before generating a report with proposed code-level fixes.

Do I need a running development server to check my website for UI consistency issues?▼

Yes, you need a running target site accessible via a local development server or live URL, along with browser automation capable of screenshots and DOM retrieval, to effectively check and resolve UI consistency issues.

How does source-level web design fix workflow operate for Tailwind CSS projects?▼

The source-level web design fix workflow identifies affected CSS or component files in Tailwind CSS projects, applies minimal framework-aware changes to resolve layout problems, and re-verifies the resolution with before and after screenshot comparisons.

Why does my mobile layout break when testing across different viewports?▼

Your mobile layout breaks due to viewport-specific overflow or alignment issues, which can be detected by traversing pages, analyzing DOM snapshots across breakpoints, and resolving the problems with targeted component fixes.

Related Skills

Explore More Design & Creative Skills→
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced
protofireprotofire
3

protofire-qa-agent

Audit smart contracts with Slither, Echidna, and Foundry fuzz testing.

Official
Advanced
parisgroup-aiparisgroup-ai
1

qa-mobile

Detect responsive layout and mobile UX regressions across browser viewports with Playwright MCP.

Official
Intermediate
warpdotdevwarpdotdev
820

web-accessibility-audit

Audit web pages against WCAG standards using automated tools and manual review.

Official
Intermediate