UI/UX Design

Audit UI/UX designs for WCAG 2.1 AA accessibility and design token consistency.

1|1|Updated Nov 20, 2025
One-click install
npx skills add https://github.com/fabioc-aloha/AIRS_Data_Analysis --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/AIRS_Data_Analysis/tree/main/.github/skills/ui-ux-design
Command: npx skills add https://github.com/fabioc-aloha/AIRS_Data_Analysis --skill ui-ux-design-fabioc-aloha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces and experiences that are not only visually appealing but also highly usable, accessible to all users, and consistent across platforms.

Core Features & Use Cases

  • Accessibility Compliance: Ensures adherence to WCAG 2.1 AA standards for perceivability, operability, understandability, and robustness.
  • Design System Implementation: Guides the creation and application of design tokens (typography, spacing, color) for consistent and scalable UIs.
  • Use Case: When developing a new VS Code extension, use this Skill to audit its UI for accessibility issues, implement a consistent design language using CSS variables, and ensure all interactive elements meet WCAG contrast and touch target requirements.

Quick Start

Perform a systematic UI/UX audit on the provided web application mockups to identify accessibility violations and design inconsistencies.

Frequently Asked Questions about UI/UX Design

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

FAQPage Schema
How do I audit my web application mockups for WCAG 2.1 AA accessibility compliance?

To audit web application mockups for WCAG 2.1 AA compliance, perform a systematic UI/UX audit to identify accessibility violations and design inconsistencies. This process checks perceivability, operability, understandability, and robustness.

What is the best way to implement design tokens for consistent UI theming?

The best way to implement design tokens for consistent UI theming is to define typography, spacing, and color tokens as CSS variables. This ensures a scalable design language and maintains accessibility across web and desktop applications.

Can I use these UI/UX design principles for VS Code extension development?

Yes, you can apply these UI/UX design principles to VS Code extension development. The guidelines support auditing UIs, implementing design tokens via CSS variables, and ensuring interactive elements meet WCAG contrast and touch target requirements.

How does a design system ensure interface consistency across mobile and desktop platforms?

A design system ensures interface consistency across mobile and desktop platforms by applying systematic design tokens for typography, spacing, and color. This approach maintains scalable, accessible, and visually uniform digital experiences.

Do I need CSS variables to meet WCAG 2.1 AA contrast requirements?

Using CSS variables is recommended to meet WCAG 2.1 AA contrast requirements because they enable systematic theming and consistent application of accessible color design tokens across all interactive elements and platforms.