mcpField
U
ui-ux-specialist

ui-ux-specialist

github.com/yuniorglezデザイン・UI1445 回インストール34 週間前に更新
リポジトリ

ui-ux-specialist について

フロントエンド実装向けの UI/UX・アクセシビリティスキルです。セマンティック HTML、キーボード操作、WCAG 2.2 AAを軸に、フォームのエラー復旧や視認性、パフォーマンスも扱います。

主な機能

  1. 01セマンティック HTML と適切な ARIA
  2. 02キーボードによる操作への対応
  3. 03WCAG 2.2 AA ガイドラインの適用
  4. 04コントラストとフォーカス表示の検討
  5. 05エラー復旧を考慮したフォーム設計

活用シーン

  1. 01画面のキーボード操作を確認
  2. 02フォームのラベルとエラーメッセージを改善
  3. 03フォーカス、コントラスト、ターゲットサイズを評価

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/yuniorglez/gemini-elite-core --skill ui-ux-specialist

インストール後、Claude Code で/ui-ux-specialistを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
inclusive-design-patterns.md
semantic-html-aria.md
wcag-2-2-standards.md

詳細

♿ スキル：UI/UX とアクセシビリティのスペシャリスト（v1.1.0）

概要

ui-ux-specialist は、インクルーシブな設計と優れたフロントエンド技術を推進します。2026年において、アクセシビリティは「機能」ではなく、人権であり法的要件です（WCAG 2.2）。このスキルでは、身体的能力や認知能力にかかわらず、誰もが利用できる、セマンティックでキーボード操作に対応した高パフォーマンスなインターフェースの構築に重点を置きます。目指すのは、インクルーシブな成功です。

📋 目次

  1. フロントエンドを優れたものにするための優先事項
  2. 「してはいけないこと」リスト（アンチパターン）
  3. WCAG 2.2 AA 基準
  4. セマンティック HTML と ARIA
  5. レスポンシブで柔軟な操作性
  6. インクルーシブデザインのパターン
  7. リファレンスライブラリ

🏗️ フロントエンドを優れたものにするための優先事項

  1. セマンティックな整合性：用途に合った HTML タグを使用します。「div だけ」のインターフェースは避けます。
  2. キーボード操作への対応：すべてのインタラクティブな要素に Tab／Enter／Space キーで移動し、操作できるようにします。
  3. 視認性の高さ：高いコントラスト、明確なフォーカスインジケーター、一貫したタイポグラフィを実現します。
  4. エラーへの耐性：入力しやすいフォームと、明確なエラー回復手順を用意します。
  5. パフォーマンス予算：アクセシビリティ機能によって読み込み時間が増大しないようにします。

🚫 「してはいけないこと」リスト（アンチパターン）

アンチパターン2026年に問題となる理由最新の代替手段
div ボタンスクリーンリーダーやキーボードのユーザーに認識されません。<button> または role="button" を使用します。
固定フォントサイズ視覚に障害のあるユーザーにとって使いにくくなります。rem とレスポンシブな拡大縮小を使用します。
色だけで状態を表すこと色覚に障害のあるユーザーには利用しにくくなります。アイコンとテキストラベルを使用します。
フォーカスリングがないことキーボードのユーザーが混乱します。コントラストの高い focus-visible リングを使用します。
動画の自動再生認知障害や前庭障害のあるユーザーに不快感を与えます。prefers-reduced-motion を使用します。

📏 WCAG 2.2 AA 基準

準拠は必須です。

  • ターゲットサイズ：すべてのタッチ／クリック領域を最小 24x24px にします。
  • フォーカスの維持：インジケーターがオーバーレイで隠れないようにします。
  • コントラスト：テキストは 4.5:1、UI 要素は 3:1 にします。

詳細は 参考資料：WCAG 2.2 を参照してください。

🧱 セマンティック HTML と ARIA

  • ランドマーク：<main>、<nav>、<aside>。
  • ARIA：ネイティブ HTML では不十分な場合にのみ使用します。
  • フォーム：明示的なラベルと、ヒントに対する aria-describedby を使用します。

📖 リファレンスライブラリ

UI/UX の実装に関する詳しい解説：

更新日：2026年1月22日 - 20:05

コメント

Markdown 対応