How does it handle interactive states like loading or errors?

It provides specific patterns for simulating API failures, network errors, and slow loading using Playwright route interception to audit UI feedback without destructive actions.

Can I use this for WCAG accessibility compliance?

While the audit identifies contrast issues, it is not a replacement for a full accessibility audit. It specifically excludes comprehensive WCAG (accessibility) checks to focus on visual and interaction design.

Does this skill automatically fix my CSS code?

No, this skill is designed to conduct professional audits and provide expert recommendations. It focuses on identifying issues and suggesting improvements using design terminology rather than directly modifying source code.

What viewports are included in the audit?

The skill defines standard configurations for Mobile (428px), Tablet Portrait/Landscape (768px/1024px), Small Desktop (1160px), and Large Desktop (1920px).

Professional UI/UX Auditor

Name: Professional UI/UX Auditor
Author: L-Sypniewski

byL-Sypniewski

0•

Design Tools

Conducts comprehensive UI/UX evaluations using professional design vocabulary and multi-viewport analysis to improve interface quality.

The ui-ux-audit-guidelines skill equips Claude with a rigorous methodology for evaluating web interfaces across fifteen distinct design categories. It provides a standardized framework for analyzing visual hierarchy, spacing, typography, and responsive behavior while utilizing professional design terminology. By implementing specific viewport configurations and simulation patterns for error states, this skill ensures that audits are thorough, consistent, and actionable for design and development teams.

Key Features

01Multi-viewport evaluation from mobile to 1920px desktop

02Patterns for simulating error, loading, and empty states

0315 specialized categories covering hierarchy, spacing, and interaction

04Standardized audit report formatting and recommendation structure

050 GitHub stars

06Professional design vocabulary for precise communication

Use Cases

01Performing comprehensive design consistency checks across multi-page applications

02Identifying responsive layout regressions at specific device breakpoints

03Auditing component affordance and interaction patterns for better usability

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add l-sypniewski/claude-code-toolkit ui-ux-audit-guidelines

For use in Claude.ai and ChatGPT

Download Skill