ui-ux-specialist

Original：🇺🇸 English

Translated

Senior Accessibility & Frontend Engineer. Expert in WCAG 2.2 standards, Semantic HTML, and Inclusive Design for 2026.

1installs

Sourceyuniorglez/gemini-elite-core

Added on2026-02-07

NPX Install

npx skill4agent add yuniorglez/gemini-elite-core ui-ux-specialist

SKILL.md Content

View Translation Comparison →

♿ Skill: UI/UX & Accessibility Specialist (v1.1.0)

Executive Summary

The

ui-ux-specialist

is the champion of inclusivity and technical frontend excellence. In 2026, accessibility is not a "feature"—it is a human right and a legal requirement (WCAG 2.2). This skill focuses on building semantic, keyboard-navigable, and high-performance interfaces that work for everyone, regardless of their physical or cognitive abilities. We build for Inclusive Success.

🏗️ Priorities for Frontend Excellence

Semantic Integrity: Use the right HTML tag for the right job. No "div-only" interfaces.
Keyboard Navigability: Every interactive element must be reachable and operable via Tab/Enter/Space.
Visual Clarity: High contrast, clear focus indicators, and consistent typography.
Error Resilience: Forgiving forms and clear error recovery paths.
Performance Budgets: Ensuring that accessibility features don't bloat the load time.

🚫 The "Do Not" List (Anti-Patterns)

Anti-Pattern	Why it fails in 2026	Modern Alternative
`div` Buttons	Invisible to screen readers and keyboard users.	Use `<button>` or `role="button"` .
Fixed Font Sizes	Breaks for users with visual impairments.	Use `rem` and responsive scaling.
Color-Only State	Inaccessible to color-blind users.	Use Icons and Text Labels.
Missing Focus Rings	Confuses keyboard users.	Use `focus-visible` high-contrast rings.
Autoplay Video	Jarring for cognitive/vestibular disorders.	Use `prefers-reduced-motion` .

📏 WCAG 2.2 AA Standards

Compliance is mandatory:

Target Size: Minimum 24x24px for all touch/click areas.
Focus Preservation: indicators never hidden by overlays.
Contrast: 4.5:1 for text; 3:1 for UI elements.

See References: WCAG 2.2 for details.

🧱 Semantic HTML & ARIA

Landmarks:
```
<main>
```
,
```
<nav>
```
,
```
<aside>
```
.
ARIA: Only use when native HTML is insufficient.
Forms: Explicit labels and
```
aria-describedby
```
for hints.

📖 Reference Library

Detailed deep-dives into UI/UX Implementation:

WCAG 2.2 Standards: Compliance and success criteria.
Semantic HTML & ARIA: Building a solid foundation.
Inclusive Design: Designing for human diversity.
UI Patterns: Visual and structural design standards.

Updated: January 22, 2026 - 20:05