How does the UI Design Reviewer analyze my website?

The skill uses Playwright browser automation to navigate to your URL, capture visual screenshots, analyze the DOM accessibility tree, and monitor console logs for errors or warnings.

What is included in the design review report?

The report includes a summary, numerical scores for visual harmony and accessibility, a list of critical issues, and specific actionable fixes with code examples.

Where are the visual screenshots stored?

Screenshots captured during the review process are saved to the system's temporary directory with a unique timestamp for easy reference.

Does it work with frameworks other than React?

While it is optimized for React and Tailwind CSS interfaces, the tool can analyze any rendered web page accessible via a browser.

Can this skill help with accessibility compliance?

Yes, it specifically audits for semantic HTML, heading hierarchy, ARIA roles, focus indicators, and contrast ratios to help you meet accessibility standards.

UI Design Reviewer

Name: UI Design Reviewer
Author: Expanly

byExpanly

디자인 도구

Audits web interfaces for visual harmony, accessibility, and technical health using Playwright browser automation.

소개

The UI Design Reviewer skill enables Claude to perform automated visual and accessibility audits of rendered React and Tailwind CSS interfaces. By leveraging Playwright, it captures screenshots, analyzes accessibility trees, and monitors console logs to identify inconsistencies in typography, color, spacing, and semantic structure. It generates comprehensive, structured reports that include scoring across key metrics and provide actionable code fixes, making it an essential tool for maintaining high design standards and WCAG compliance throughout the development process.

주요 기능

0 GitHub stars
Automated visual analysis against modern minimalist design principles
Comprehensive accessibility tree auditing for ARIA and semantic structure
Real-time console health monitoring for JavaScript and React warnings
Structured reporting with prioritized fixes and specific code examples
Visual state capture via screenshots for rapid design verification

사용 사례

Validating implemented React components against design system standards
Debugging layout shifts and console errors during frontend development
Performing accessibility audits on live pages to ensure WCAG compliance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add expanly/expanly-claude-code-agents design-review

For use in Claude.ai and ChatGPT

Download Skill

GitHub

소개