スキル一覧に戻る
YuniorGlez

ui-ux-specialist

by YuniorGlez

Transform your Gemini CLI into a high-performance autonomous agentic environment. This repository provides a curated collection of tactical skills, advanced agent configurations, and automated protocol hooks used by elite engineering teams.

0🍴 2📅 2026年1月25日
GitHubで見るManusで実行

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

  1. Priorities for Frontend Excellence
  2. The "Do Not" List (Anti-Patterns)
  3. WCAG 2.2 AA Standards
  4. Semantic HTML & ARIA
  5. Responsive & Fluid Interaction
  6. Inclusive Design Patterns
  7. Reference Library

🏗️ Priorities for Frontend Excellence

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

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

Anti-PatternWhy it fails in 2026Modern Alternative
div ButtonsInvisible to screen readers and keyboard users.Use <button> or role="button".
Fixed Font SizesBreaks for users with visual impairments.Use rem and responsive scaling.
Color-Only StateInaccessible to color-blind users.Use Icons and Text Labels.
Missing Focus RingsConfuses keyboard users.Use focus-visible high-contrast rings.
Autoplay VideoJarring 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:


Updated: January 22, 2026 - 20:05

スコア

総合スコア

60/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

+10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です