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

0•

디자인 도구

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

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.

주요 기능

01WCAG 2.2 AA accessibility auditing for contrast, focus rings, and touch targets

02Nielsen’s 10 Heuristics usability checks for system status and error prevention

030 GitHub stars

04Prioritized reporting with Critical and Warning severity levels

05Material Design 3 component state validation (hover, focus, disabled, etc.)

06Code-level implementation fixes for Tailwind CSS and shadcn/ui components

사용 사례

01Reviewing React components during development to ensure design system compliance

02Auditing existing web applications for WCAG 2.2 AA accessibility gaps

03Refactoring legacy CSS to use standardized design tokens and Material Design patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add daichihoshina/ai-tools uiux-design

For use in Claude.ai and ChatGPT

Download Skill