Does this skill check for mobile accessibility?

Yes, it specifically reviews touch target sizes (minimum 44x44px) and responsive spacing based on WCAG and Material Design standards.

Can it detect low color contrast ratios?

Yes, it checks for WCAG 2.2 AA compliance, ensuring a minimum contrast ratio of 4.5:1 for standard text to ensure readability.

Does it help maintain design system consistency?

Yes, it identifies when hardcoded colors or spacing are used instead of established design tokens, helping maintain a unified design language.

How are the review results delivered?

Results are provided in a structured report categorized by the design principle violated, marked as Critical or Warning, accompanied by code implementation examples.

Which CSS frameworks are supported?

The skill is highly optimized for projects using Tailwind CSS and UI libraries like shadcn/ui, providing specific class name suggestions.

UI/UX Design Auditor

Name: UI/UX Design Auditor
Author: DaichiHoshina

byDaichiHoshina

Design Tools

Automates UI/UX design reviews based on Material Design 3 standards, WCAG 2.2 accessibility, and Nielsen’s usability heuristics.

About

The UI/UX Design Auditor skill empowers developers to perform comprehensive design reviews directly within their codebases. By applying industry-standard frameworks like Material Design 3 for component states, WCAG 2.2 AA for accessibility, and Nielsen’s 10 Heuristics for usability, it identifies critical interface flaws. This skill is specifically optimized for modern frontend stacks including React, Next.js, Tailwind CSS, and shadcn/ui, providing actionable code-level fixes to ensure your application is accessible, consistent, and user-friendly.

Key Features

WCAG 2.2 AA accessibility auditing for contrast, focus rings, and touch targets
Nielsen’s 10 Heuristics usability checks for system status and error prevention
0 GitHub stars
Prioritized reporting with Critical and Warning severity levels
Material Design 3 component state validation (hover, focus, disabled, etc.)
Code-level implementation fixes for Tailwind CSS and shadcn/ui components

Use Cases

Reviewing React components during development to ensure design system compliance
Auditing existing web applications for WCAG 2.2 AA accessibility gaps
Refactoring legacy CSS to use standardized design tokens and Material Design patterns

About

Key Features

WCAG 2.2 AA accessibility auditing for contrast, focus rings, and touch targets
Nielsen’s 10 Heuristics usability checks for system status and error prevention
0 GitHub stars
Prioritized reporting with Critical and Warning severity levels
Material Design 3 component state validation (hover, focus, disabled, etc.)
Code-level implementation fixes for Tailwind CSS and shadcn/ui components

Use Cases

Reviewing React components during development to ensure design system compliance
Auditing existing web applications for WCAG 2.2 AA accessibility gaps
Refactoring legacy CSS to use standardized design tokens and Material Design patterns