skills.rest
fabioc-aloha
fabioc-alohaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

UI/UX Design

Audit interfaces and implement design systems for WCAG 2.1 accessibility compliance.

1|Updated Mar 5, 2026
Search Tags:#accessibility#design system#wcag#contrast#css variables#aria#ux audit
One-click install
npx skills add https://github.com/fabioc-aloha/AlexAgent --skill ui-ux-design-fabioc-aloha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI/UX Design
Source: https://github.com/fabioc-aloha/AlexAgent/tree/main/plugin/skills/ui-ux-design
Command: npx skills add https://github.com/fabioc-aloha/AlexAgent --skill ui-ux-design-fabioc-aloha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interfaces often ship with inconsistent typography, poor color contrast, undersized touch targets, and missing ARIA attributes that fail WCAG accessibility standards and exclude users relying on keyboards or screen readers. ## Core Features & Use Cases - Systematic UI/UX Audit: Three-phase process covering visual assessment (typography, spacing, color, touch targets), accessibility testing (keyboard navigation, screen readers, semantic HTML), and design system implementation. - WCAG 2.1 Compliance Checklists: Concrete thresholds for contrast ratios (4.5:1 AA, 7:1 AAA), minimum font sizes (11px), and touch target dimensions (44×44px) with severity-ranked violation tracking. - Design Token Workflow: Extract existing CSS values, calculate base units, and generate theme-aware CSS variables using VS Code color tokens for dark/light mode compatibility. - Use Case: When refactoring a VS Code extension webview, run the audit checklist to find contrast violations and missing focus indicators, then apply the CSS variable pattern to build a consistent, accessible design system. ## Quick Start Audit this webview's CSS for WCAG 2.1 AA violations and generate a design token system with accessible focus indicators.

Frequently Asked Questions about UI/UX Design

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

FAQPage Schema
How do I make a web interface WCAG 2.1 AA compliant?▼

Ensure text contrast of at least 4.5:1, font sizes of 11px or larger, keyboard access to all functionality with visible focus indicators, and touch targets of at least 44×44px. Add ARIA labels to icon-only buttons and use semantic HTML landmarks.

How to audit CSS for accessibility violations?▼

Extract all font-size, spacing, and color declarations with grep, then check contrast ratios with WebAIM or Chrome DevTools. Flag fonts under 11px, touch targets under 44px, and contrast below 4.5:1 as violations ranked by severity.

What is the minimum touch target size for accessibility?▼

WCAG 2.1 Success Criterion 2.5.5 requires touch targets of at least 44×44px, with 48×48px recommended for primary actions. Adjacent targets need at least 8px spacing to prevent mis-taps.

Does this approach work with VS Code extension webviews?▼

Yes, the design token pattern uses VS Code theme-aware CSS variables like --vscode-foreground and --vscode-button-background, so components adapt automatically to dark, light, and high-contrast themes without hardcoded colors.

Why do color-only status indicators fail accessibility?▼

Color-blind users cannot distinguish status conveyed by color alone, violating WCAG 1.4.1. Add icons, patterns, or text labels alongside color coding, such as checkmark or warning symbols inside status dots.

What tools test web accessibility automatically?▼

axe DevTools, Lighthouse, WAVE, and Pa11y detect WCAG violations automatically. Manual testing with NVDA, VoiceOver, or Narrator screen readers plus keyboard-only navigation remains necessary for full coverage.

Related Skills

Explore More Design & Creative Skills→
fabioc-alohafabioc-aloha
1

UI/UX Design

Audit interfaces and implement design systems for WCAG 2.1 accessibility compliance.

Community
Intermediate
aquariuscookaquariuscook

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 AA compliance.

Community
Advanced
rezosndrezosnd

branding-generator

Generate brand identity kits with color palettes, typography, and logo concepts.

Community
Intermediate
erikvullingserikvullings
26

mithril-materialized-ui

Develop Mithril.js applications using mithril-materialized UI components.

Community
Advanced