ui-ux-design

Audit WCAG 2.1 AA compliance and generate accessible design tokens.

Updated Jun 5, 2026
One-click install
npx skills add https://github.com/0xRayAI/xray --skill ui-ux-design-0xrayai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/0xRayAI/xray/tree/main/skills/ui-ux-design
Command: npx skills add https://github.com/0xRayAI/xray --skill ui-ux-design-0xrayai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of maintaining high-quality design standards, accessibility compliance, and cognitive efficiency in web and mobile interfaces.

Core Features & Use Cases

  • Accessibility Auditing: Automatically validates WCAG 2.1 AA compliance, including color contrast ratios and touch target sizing.
  • Design System Generation: Creates consistent, accessible design tokens and component structures.
  • Cognitive Load Analysis: Evaluates layouts against the 3-second rule and Hick's Law to ensure intuitive user experiences.
  • Use Case: Use this skill to audit a landing page hero section to ensure the text-to-background contrast ratio meets the 4.5:1 requirement for accessibility.

Quick Start

Use the ui-ux-design skill to analyze the hero section contrast and validate the mobile responsiveness of the current landing page.

Frequently Asked Questions about ui-ux-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my interface meets WCAG 2.1 AA accessibility compliance?▼

To check WCAG 2.1 AA accessibility compliance, you can audit color contrast ratios and touch target sizing. This validation ensures your interface meets the 4.5:1 text-to-background contrast requirement for accessible, user-friendly experiences.

What is cognitive load analysis in UI/UX design and how does it work?▼

Cognitive load analysis in UI/UX design evaluates layouts against the 3-second rule and Hick's Law to ensure intuitive user experiences. It works by optimizing visual hierarchy to reduce user decision time and cognitive effort.

How do I generate an accessible design system for mobile-first interfaces?▼

To generate an accessible design system for mobile-first interfaces, use automated component generation based on design tokens. This creates consistent, accessible structures while validating mobile responsiveness and visual hierarchy optimization.

Can I validate mobile responsiveness and visual hierarchy for my landing page?▼

Yes, you can validate mobile responsiveness and visual hierarchy for your landing page through viewport-specific layout analysis. This process evaluates your hero section against mobile-first principles to ensure high-contrast, user-friendly interfaces.

Do I need design tokens to perform a UI accessibility audit?▼

Yes, design tokens are required to perform a comprehensive UI accessibility audit. The auditing process requires integration with design tokens and viewport-specific layout analysis to accurately validate contrast ratios and component compliance.

What is the best way to optimize visual hierarchy for accessible web interfaces?▼

The best way to optimize visual hierarchy for accessible web interfaces is combining cognitive load analysis with WCAG 2.1 AA compliance checks. This approach applies Hick's Law and mobile-first principles to create intuitive, high-contrast layouts.