skills.rest
scsm-unrestrict
scsm-unrestrictCOMMUNITY
Explore all skills by this author →
GitHub

ui-ux-design-expert

Provides UI/UX design guidance covering WCAG 2.2 accessibility, design systems, and user research methods.

1|Updated Aug 18, 2026
Search Tags:#accessibility#design system#user research#prototyping#wcag#ui design#ux
One-click install
npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill ui-ux-design-expert-scsm-unrestrict
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design-expert
Source: https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent/tree/main/frontend-engineer/skills/ui-ux-design-expert
Command: npx skills add https://github.com/scsm-unrestrict/dsh-frontend-engineer-agent --skill ui-ux-design-expert-scsm-unrestrict

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing accessible, user-centered interfaces requires deep knowledge of WCAG 2.2 compliance, design systems, and research methods that most teams lack in one place, leading to legal risk and inconsistent user experiences. ## Core Features & Use Cases - WCAG 2.2 Accessibility Guidance: Concrete contrast ratios, touch target sizes, ARIA patterns, and testing tools aligned with the European Accessibility Act deadline. - Design System Architecture: Design tokens, atomic design methodology, and component documentation patterns referencing Material Design, Carbon, and Ant Design. - User Research & UI Patterns: Interview, usability testing, and A/B testing methods plus typography scales, 8-point grids, and responsive breakpoints. - Use Case: When building a login form, get WCAG-compliant HTML with labels, autocomplete attributes, error handling, and touch targets, plus guidance on passwordless alternatives. ## Quick Start Ask the agent to design or audit an interface, for example: review my checkout form for WCAG 2.2 accessibility issues and suggest fixes.

Frequently Asked Questions about ui-ux-design-expert

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

FAQPage Schema
How do I make a form WCAG 2.2 compliant?▼

Use visible persistent labels instead of placeholder-only text, ensure 4.5:1 text contrast, provide 44x44px minimum touch targets, add autocomplete attributes, and write specific error messages. Support full keyboard navigation with visible focus indicators.

What are the WCAG 2.2 contrast ratio requirements?▼

Normal text requires 4.5:1 minimum contrast, large text (18pt+ or 14pt+ bold) requires 3:1, and UI components and graphics require 3:1. WCAG AAA raises these to 7:1 for normal text and 4.5:1 for large text.

How do I structure a design system with design tokens?▼

Define tokens for colors, typography, spacing (4px or 8px base), border radius, shadows, and breakpoints, then build components using atomic design: atoms, molecules, organisms, templates, and pages. Document each component's states, usage guidelines, and accessibility notes.

How many users do I need for usability testing?▼

Five users per segment is often sufficient for usability testing, per Nielsen Norman Group research. Use think-aloud protocols with realistic task scenarios and measure task success rate, time on task, and error rate.

What tools should I use to test website accessibility?▼

Use axe DevTools, WAVE, and Lighthouse for automated checks, plus Color Contrast Analyzer for ratios. Combine these with manual keyboard-only navigation testing and screen readers like NVDA, JAWS, or VoiceOver.

Related Skills

Explore More Design & Creative Skills→
Full-Stack-AssetsFull-Stack-Assets

brand-measurement

Define and track brand health KPIs across awareness, perception, and equity.

Community
Advanced
OneWave-AIOneWave-AI
245

screenshot-to-code

Convert UI screenshots into responsive HTML, CSS, React, or Vue code.

Official
Advanced
Eng-susoEng-suso

wcag-audit-patterns

Audit web content against WCAG 2.2 criteria with automated scans and manual verification checklists.

Community
Intermediate
NoobyGainsNoobyGains
78

design-integration

Detect a project's design system and enforce its conventions for new UI components.

Community
Advanced