web-design-reviewer

Audit website design responsiveness, accessibility, and layout issues via browser automation.

1|Updated May 4, 2026
One-click install
npx skills add https://github.com/beel-collab/presets.dev --skill web-design-reviewer-beel-collab
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/beel-collab/presets.dev/tree/main/skills/web-design-reviewer
Command: npx skills add https://github.com/beel-collab/presets.dev --skill web-design-reviewer-beel-collab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables visual inspection and validation of website design quality, identifying and fixing issues at the source code level.

Core Features & Use Cases

  • Visual inspection of running websites (local or remote) to detect responsive, accessibility, and layout problems.
  • Automated signaling and guidance to fix design issues in the source code across common web stacks (static sites, SPA, Next.js/Nuxt/SvelteKit, and CMS platforms).
  • Use Case: Imagine reviewing a local development site and obtaining a completion report highlighting breakpoint failures and accessibility gaps, then applying suggested code changes.

Quick Start

Provide the URL of the site to review, initiate the visual inspection, and apply the recommended fixes in your codebase. For example: review your local site at http://localhost:3000 and generate a design-quality report.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I audit my website for responsive and accessibility issues?

To audit a website for responsive and accessibility issues, you provide the URL of a running site. The skill performs browser automation to capture the DOM and screenshots, identifying layout and UI quality problems before generating repair suggestions.

Can I review a local development server for web design problems?

Yes, you can review a local development server for web design problems. The skill performs visual inspection on local or remote running sites, capturing the DOM state to detect breakpoint failures and accessibility gaps for static sites and SPA frameworks.

Does the visual inspection tool work with Next.js and SvelteKit apps?

The visual inspection tool works with Next.js, Nuxt, and SvelteKit apps. It applies browser automation to capture screenshots and review UI quality across SPA frameworks, static sites, and CMS platforms by accessing the running application.

What's the best way to fix layout issues detected during a website review?

The best way to fix detected layout issues is applying the generated repair suggestions directly to your source code. The skill requires access to your project codebase to implement the changes that resolve the responsive and accessibility problems it found.

Do I need access to the project codebase to fix web design issues?

Yes, you need access to the project codebase to fix web design issues. While the skill can audit any READ-ONLY production or staging environment, implementing the suggested code changes for detected layout and accessibility gaps requires source code access.