Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
ui-ux-specialist
3
3
# Install this skill:
npx skills add YuniorGlez/gemini-elite-core --skill "ui-ux-specialist"
Install specific skill from multi-skill repository
# Description
Senior Accessibility & Frontend Engineer. Expert in WCAG 2.2 standards, Semantic HTML, and Inclusive Design for 2026.
# SKILL.md
name: ui-ux-specialist
id: ui-ux-specialist
version: 1.1.0
description: "Senior Accessibility & Frontend Engineer. Expert in WCAG 2.2 standards, Semantic HTML, and Inclusive Design for 2026."
βΏ 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.
π Table of Contents
- Priorities for Frontend Excellence
- The "Do Not" List (Anti-Patterns)
- WCAG 2.2 AA Standards
- Semantic HTML & ARIA
- Responsive & Fluid Interaction
- Inclusive Design Patterns
- Reference Library
ποΈ 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-describedbyfor 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
# Related Skills
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support...
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and...
Guide for implementing oRPC contract-first API patterns in Dify frontend. Triggers when creating...
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Amp
Antigravity
Claude Code
Clawdbot
Codex
Cursor
Droid
Gemini CLI
GitHub Copilot
Goose
Kilo Code
Kiro CLI
OpenCode
Roo Code
Trae
Windsurf
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.