Does it support accessibility standards?

The skill checks for WCAG Level A and AA compliance, including aria-labels, alt text for images, color contrast ratios, and keyboard focus management.

What is 'Status Explosion' detection?

It identifies components with excessive or unmanaged state codes (7+) that may lead to brittle UI, suggesting patterns for more robust conditional rendering.

How does it handle responsive design verification?

It analyzes component classes and layout patterns to ensure proper grid collapse and touch target sizes across mobile (375px), tablet (768px), and desktop (1024px+) views.

What specifically does the UI/UX Evaluator check?

It performs an 8-pass evaluation covering design tokens, visual consistency, layout structure, responsiveness, component states, animations, accessibility, and copy usability.

Can it detect hardcoded CSS values?

Yes, it specifically scans for hardcoded hex codes, RGB values, or arbitrary pixel measurements that bypass your project's design tokens or Tailwind configuration.

UI/UX Design Auditor

Name: UI/UX Design Auditor
Author: Ibrahim-3d

byIbrahim-3d

•

291

•

Design Tools

Evaluates user interfaces for design system adherence, accessibility compliance, and visual consistency within the Claude Code environment.

The UI/UX Design Auditor is a specialized quality gate agent designed to perform deep structural and visual reviews of frontend implementations. It functions as a sophisticated evaluator that checks for design system token usage, responsive layout behavior across multiple breakpoints, and exhaustive component state coverage including loading and error transitions. By analyzing code for brittle rendering patterns and WCAG accessibility standards, it ensures that AI-generated UI meets production-grade standards for usability and technical excellence.

Key Features

01Design System & Token Adherence Validation

02Component State & Interactive Logic Verification

03291 GitHub stars

04Copy Quality and Usability Jargon Detection

05Automated WCAG Accessibility Baseline Auditing

06Multi-Breakpoint Responsive Layout Analysis

Use Cases

01Performing a pre-deployment accessibility and responsive audit for complex web screens.

02Identifying and fixing brittle conditional rendering logic in interactive UI elements.

03Automating visual consistency checks during the implementation of new design system components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ibrahim-3d/conductor-orchestrator-superpowers eval-ui-ux

For use in Claude.ai and ChatGPT

Download Skill