Does it support accessibility testing?

It audits for WCAG A and AA requirements, including image alt text, input labels, color contrast ratios, and keyboard focus visibility.

Can it detect hardcoded CSS values?

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

What specific UI elements does the Evaluator check?

It performs 8 specific passes: design system adherence, visual consistency, layout structure, responsiveness, component states, animations, accessibility, and copy usability.

How is this skill triggered in Claude Code?

It is automatically dispatched by the loop-execution-evaluator when UI tasks are detected, or it can be manually triggered using phrases like 'evaluate UI' or 'design review'.

Which files does the Evaluator need to access?

It analyzes your design system reference (CSS/tokens), component files in src/components, page layouts in src/app, and any local data files containing UI copy.

UI/UX Visual Evaluator

Name: UI/UX Visual Evaluator
Author: AhmedElhadarey

byAhmedElhadarey

•

Herramientas de Diseño

Automates comprehensive UI/UX audits and design system compliance checks for frontend components and application screens.

The UI/UX Visual Evaluator is a specialized agent designed for the Claude Code Evaluate-Loop, specifically focused on critiquing visual deliverables like component libraries and layout implementations. It executes an 8-pass evaluation process that covers design system adherence, responsive behavior across mobile and desktop breakpoints, WCAG accessibility standards, and interactive component state coverage. By analyzing CSS tokens, layout structures, and user-facing copy, this skill ensures that frontend development maintains high visual quality and remains consistent with the project's established design language.

Características Principales

012 GitHub stars

02Design system token validation for colors, spacing, and typography adherence

03Usability and copy quality review to eliminate jargon and improve UX tone

04Multi-breakpoint responsive testing for mobile, tablet, and desktop layouts

05Accessibility baseline checks for WCAG contrast, ARIA labels, and focus order

06Interactive state auditing for buttons, inputs, modals, and loading skeletons

Casos de Uso

01Validating a new component library against an existing design system and CSS variables

02Performing a visual consistency audit across multiple screens after a major frontend refactor

03Ensuring all application pages meet accessibility standards and mobile-responsive requirements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ahmedelhadarey/gilfoyle eval-ui-ux

For use in Claude.ai and ChatGPT

Download Skill