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.
Key Features
010 GitHub stars
02Automated visual analysis against modern minimalist design principles
03Comprehensive accessibility tree auditing for ARIA and semantic structure
04Real-time console health monitoring for JavaScript and React warnings
05Structured reporting with prioritized fixes and specific code examples
06Visual state capture via screenshots for rapid design verification
Use Cases
01Validating implemented React components against design system standards
02Debugging layout shifts and console errors during frontend development
03Performing accessibility audits on live pages to ensure WCAG compliance
