web-design-reviewer_skill

Overview

This skill performs visual inspection and source-level fixes for website design issues on local or remote sites. It detects layout breakage, responsive problems, accessibility gaps, and visual inconsistencies, then locates and applies minimal code changes in the project. The skill returns before/after verification and a clear report of detected and resolved issues.

How this skill works

The skill navigates the target site, captures screenshots, and retrieves DOM snapshots to identify layout, responsiveness, accessibility, and visual consistency issues. When allowed, it maps problematic elements to source files using selector and component searches, applies minimal fixes following existing project patterns, and re-verifies changes across key viewports. It prioritizes issues by severity and iterates until the user-approved threshold or iteration limit is reached.

When to use it

• You need a quick audit of UI layout and responsive behavior on local or staging sites.
• You want automated detection of accessibility problems like low contrast or missing alt text.
• You want source-level fixes applied directly in the project workspace.
• You need verification screenshots and a clear before/after report for stakeholder review.
• You are preparing a site for release and want to eliminate critical layout regressions.

Best practices

• Provide the target URL and scope (specific pages or entire site) before starting.
• Ensure the development server is running and browser automation is available for accurate inspection.
• Grant access to the project workspace if you want automated source fixes applied.
• Back up or commit current code before automatic edits and confirm significant changes before merging.
• Test fixes across mobile, tablet, desktop, and wide viewports and keep fixes minimal and scoped.

Example use cases

• Fix overflowing headers and overlapping elements on a React site and verify fixes on mobile and desktop.
• Detect and correct insufficient color contrast and missing image alt text across a marketing site.
• Adjust spacing and font consistency in a Next.js app using Tailwind or CSS modules.
• Resolve breakpoint issues where layouts collapse unexpectedly on small screens.
• Produce a review report showing detected issues, applied fixes, and before/after screenshots for QA sign-off.