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

デザインツール

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.

主な機能

Multi-viewport evaluation from mobile to 1920px desktop
Patterns for simulating error, loading, and empty states
15 specialized categories covering hierarchy, spacing, and interaction
Standardized audit report formatting and recommendation structure
0 GitHub stars
Professional design vocabulary for precise communication

ユースケース

Performing comprehensive design consistency checks across multi-page applications
Identifying responsive layout regressions at specific device breakpoints
Auditing component affordance and interaction patterns for better usability

概要

主な機能

Multi-viewport evaluation from mobile to 1920px desktop
Patterns for simulating error, loading, and empty states
15 specialized categories covering hierarchy, spacing, and interaction
Standardized audit report formatting and recommendation structure
0 GitHub stars
Professional design vocabulary for precise communication

ユースケース

Performing comprehensive design consistency checks across multi-page applications
Identifying responsive layout regressions at specific device breakpoints
Auditing component affordance and interaction patterns for better usability