skills.rest
dhar174
dhar174COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-reviewer

Inspect website design issues and fix source code automatically.

1|Updated Dec 22, 2025
Search Tags:#accessibility#responsive design#ui review#web design#code editing#css fixes
One-click install
npx skills add https://github.com/dhar174/langgraph_system_generator --skill web-design-reviewer-dhar174
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-reviewer
Source: https://github.com/dhar174/langgraph_system_generator/tree/main/.github/skills/web-design-reviewer
Command: npx skills add https://github.com/dhar174/langgraph_system_generator --skill web-design-reviewer-dhar174

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill identifies and fixes visual design issues in websites, improving user experience and accessibility by directly editing source code.

Core Features & Use Cases

  • Visual Inspection: Detects layout, responsiveness, accessibility, and consistency problems.
  • Automated Fixing: Modifies CSS and component code to resolve identified issues.
  • Use Case: A marketing website has a button that's too small on mobile devices. This skill can automatically detect the issue, locate the relevant CSS or component file, and adjust the button's size and padding to meet accessibility standards.

Quick Start

Review the website at http://localhost:3000 for any design problems.

Frequently Asked Questions about web-design-reviewer

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

FAQPage Schema
How do I fix website design flaws automatically in my source code?▼

You can automatically fix website design flaws by using this skill to visually inspect your application via browser automation, identify layout and accessibility issues, and directly modify your CSS and component source files.

Can I use Playwright for responsive design and UI review tasks?▼

Yes, this skill uses Playwright for responsive design and UI review tasks, relying on the browser automation tool for navigating, screenshotting, and inspecting the DOM to detect visual consistency problems.

What is the best way to check website accessibility and visual consistency during development?▼

The best way to check website accessibility and visual consistency is using an automated visual inspection process that screenshots your web app, detects problems, and performs source code level fixes to meet accessibility standards.

Does automated web design review work with various web application frameworks?▼

Yes, automated web design review works across various web application frameworks and styling methods, identifying visual problems and adjusting the relevant component or CSS files regardless of the framework used.

Do I need code search capabilities to fix CSS issues found during a UI review?▼

Yes, you need code search capabilities to fix CSS issues found during a UI review, as the skill relies on code search to locate the specific source files that require modification after detecting visual design problems.

Related Skills

Explore More Design & Creative Skills→
AnsteorraAnsteorra
6

web-design-reviewer

Inspect website design issues and apply source-level fixes with Playwright.

Official
Advanced
NolanPicNolanPic

Frontend Accessibility

Enforce WCAG compliance in frontend UI code with semantic HTML and ARIA.

Community
Basic
GabeujinGabeujin

web-design-reviewer

Inspect website screenshots and DOM structure to fix design issues.

Community
Advanced
HiroyukiMakitaHiroyukiMakita

web-design-reviewer

Inspect website designs and fix responsive, accessibility, and layout issues in source code.

Community
Advanced