web-design-reviewer

Inspect websites for visual defects and fix source code issues.

Updated Apr 1, 2026
One-click install
npx skills add https://github.com/jaimedhenriques/finsyt --skill web-design-reviewer-jaimedhenriques
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/jaimedhenriques/finsyt/tree/main/artifacts/platform/.agents/skills/web-design-reviewer
Command: npx skills add https://github.com/jaimedhenriques/finsyt --skill web-design-reviewer-jaimedhenriques

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you inspect a website for visual defects, responsive breakpoints, accessibility problems, and layout inconsistencies, then repair the underlying source code with minimal changes.

Core Features & Use Cases

  • Visual review of live sites running locally, in staging, or in production
  • Detection of layout overflow, overlap, spacing errors, contrast issues, and missing focus states
  • Responsive testing across mobile, tablet, desktop, and wide screens
  • Source-level fixes for modern web stacks such as React, Vue, Next.js, Nuxt, SvelteKit, and CMS-driven sites
  • Example use case: review a checkout page, find the mobile layout breakage, and update the component styles so the page renders cleanly on small screens

Quick Start

Review the target website for design and usability issues, then apply the smallest source-code changes needed to fix them.

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 responsive layout issues in my web app?

To fix responsive layout issues, you can review your web app across mobile, tablet, and desktop breakpoints, then apply minimal source-code changes to repair overflow and spacing errors in your components.

Can I run an accessibility audit and UI consistency check on a live production site?

Yes, you can perform an accessibility audit and UI consistency check on live production sites, staging environments, or local apps by capturing screenshots and inspecting the DOM to identify contrast issues and missing focus states.

Does automated website review work with SPA frameworks like React, Vue, and SvelteKit?

Automated website review works with SPA frameworks like React, Vue, Next.js, Nuxt, and SvelteKit by navigating the browser, inspecting the DOM, and modifying the underlying source code to remediate visual defects.

What is the best way to inspect a website for visual defects without manual screenshot comparisons?

The best way to inspect a website for visual defects is using browser automation to capture screenshots and inspect the DOM, detecting layout overlaps, spacing errors, and contrast problems for immediate code-level remediation.

How do I fix mobile layout breakage on a checkout page using source-level remediation?

To fix mobile layout breakage on a checkout page, review the target page for design issues, identify the broken responsive breakpoints, and update the component styles with the smallest source-code changes needed for clean rendering.

Can I review and fix design flaws on CMS-driven pages?

Yes, you can review and fix design flaws on CMS-driven pages by inspecting the rendered DOM and applying minimal source-level fixes to resolve visual inconsistencies and layout problems.