skills.rest
yahav123147
yahav123147COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-expert

Apply WCAG 2.2 accessibility and design system patterns to web and mobile UI.

1|Updated Apr 13, 2026
Search Tags:#design systems#wcag 2.2#usability testing#ux design#responsive layout#ui accessibility
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill ui-ux-expert-yahav123147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-expert
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/ui-ux-expert
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill ui-ux-expert-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you avoid confusing, inaccessible, and inconsistent UI/UX that frustrates users, fails usability expectations, and can violate WCAG requirements.

Core Features & Use Cases

  • User-centered UX guidance: turn user needs into personas, journeys, wireframes, and usability test plans.
  • Accessibility-first design (WCAG 2.2): ensure keyboard navigation, focus visibility, semantic structure, ARIA patterns, contrast, and screen-reader compatibility.
  • Design system & responsive implementation: create reusable components, tokens, and patterns that work across mobile and desktop, including performance-friendly UX (loading states, CLS reduction).

Quick Start

Use the ui-ux-expert skill to audit and redesign an existing signup UI for accessibility and usability, given this UI’s goal, target users, and key screens.

Frequently Asked Questions about ui-ux-expert

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

FAQPage Schema
How do I make my web application UI meet WCAG 2.2 accessibility requirements?▼

To meet WCAG 2.2 requirements, your UI must implement semantic structure, correct ARIA patterns, keyboard navigation, visible focus states, and screen-reader compatibility. Ensuring accessible contrast ratios and touch targets across interactive flows guarantees compliance and usability.

What is the best way to create a responsive component system for mobile and desktop?▼

Creating a responsive component system involves building reusable UI components and design tokens using mobile-first layout decisions. This approach ensures consistent rendering across mobile and desktop applications while maintaining performance-friendly UX patterns and reducing layout shifts.

How do I design a usability test plan for an interactive signup flow?▼

Designing a usability test plan for a signup flow requires translating user needs into personas and user journeys. You then evaluate the interactive wireframes by testing the semantic structure, feedback states, and accessibility of forms and modals against user expectations.

Why does my dashboard UI fail screen-reader and keyboard navigation tests?▼

Your dashboard UI fails screen-reader and keyboard navigation tests due to missing semantic structure, incorrect ARIA usage, or poor focus visibility. Fixing interactive elements like modals and forms with proper accessibility patterns resolves these usability barriers.

Can I audit an existing application's UX for accessibility and performance issues?▼

You can audit an existing application's UX by evaluating its interactive flows against user-centered design and accessibility patterns. This process identifies missing loading states, layout shift issues, and WCAG 2.2 compliance gaps in screens like dashboards and forms.

Related Skills

Explore More Design & Creative Skills→
asalhamedasalhamed

ux-researcher

Analyze user needs into personas, journey maps, and usability requirements.

Community
Advanced
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced
BrandondaymdrBrandondaymdr
1

cheersworthy-wireframe

Standardize mobile-first wireframes for Cheersworthy e-commerce pages.

Community
Intermediate
bdbchbdbch
2

accessibility-audit

Audit web pages for WCAG 2.1/2.2 compliance and report issues.

Community
Advanced