mcpField
U
unicode-color-accessibility

unicode-color-accessibility

github.com/josiahsiegelデザイン・UI5959 回インストール19 週間前に更新
リポジトリ

unicode-color-accessibility について

Unicode、色、フォント、支援技術の違いを考慮し、読みやすく正確なターミナル出力を設計するためのスキルです。テキスト計測や色の扱い、非 TUI の代替手段を扱います。

主な機能

  1. 01Unicode 幅と書記素クラスタの処理
  2. 02ANSI 制御シーケンスを除いた計測
  3. 03意味に基づく色と無色モード
  4. 04図形要素の ASCII フォールバック
  5. 05キーボードとスクリーンリーダー対応

活用シーン

  1. 01絵文字や CJK 文字を含む表の整列
  2. 02明暗テーマに応じた色出力の設計
  3. 03アクセシブルな非 TUI のコマンドフロー

インストール

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

$npx skills add https://github.com/josiahsiegel/claude-plugin-marketplace --skill unicode-color-accessibility

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

同梱ファイルreferences/accessibility-fallbacks.mdreferences/text-measurement.md

詳細

Unicode、色、アクセシビリティ、TUI 以外のフォールバック

ターミナル出力を、フォント、ロケール、テーマ、支援技術を問わず、視覚的に正しく、読みやすく、包括的で堅牢にする必要がある場合に、このスキルを使用します。

テキストの正確性に関するルール

  • 表示幅は、バイト長、コードポイント数、ユーザーが認識する文字数とは異なります。
  • カーソル移動と削除は、書記素クラスタ単位で行う必要があります。
  • レイアウトでは、ANSI 制御シーケンスを除去した後の印字可能なテキストを計測する必要があります。
  • 全角文字、結合文字、絵文字シーケンス、異体字セレクター、ゼロ幅接合子をテストする必要があります。
  • 対象環境で明確に異なる場合を除き、東アジア幅が曖昧な文字はデフォルトで半角として扱います。

ビジュアルデザインに関するルール

  • 意味上の役割を使用します:エラー、警告、成功、情報、控えめ、選択中、フォーカス中、無効。
  • 色だけで意味を伝えず、テキスト、形状、アイコン、位置を組み合わせます。
  • 罫線文字、点字チャート、ブロック要素、絵文字、私用領域のアイコンには ASCII の代替表示を用意します。
  • Nerd Fonts やパッチ適用済みフォントを前提にしないでください。
  • 明るい背景と暗い背景、16 色、256 色、トゥルーカラー、色なしの各モードに対応します。

色の設定

ユーザーと環境の設定を尊重します:

  • NO_COLOR は必須ではない色付けを無効にします。
  • CLICOLOR、CLICOLOR_FORCE、FORCE_COLOR は、エコシステムの規約に応じて色付けを強制する場合があります。
  • TERM=dumb、TTY 以外への出力、CI では、上書きされない限り通常の出力が想定されます。
  • --color=auto|always|never、--plain、--ascii などの明示的なフラグを用意します。

アクセシビリティ要件

  • すべての機能をキーボードで操作できる必要があります。
  • 色だけに依存せず、フォーカスインジケーターを視認できるようにします。
  • 1 秒あたり 3 回を超える点滅は避けます。
  • 動きを抑えたい場合、ログ出力、CI では、スピナー、アニメーション、ライブリージョンを抑制できるようにします。
  • スクリーンリーダーに配慮した代替手段を用意します:プレーンなプロンプト、行単位のコマンド、--json、--plain、または文書化された stdin/stdout のワークフロー。
  • 意味のあるラベル、一貫した順序、視認できるステータスメッセージを使用します。

失敗のパターン

症状考えられる原因修正方法
表の位置がずれるバイト長や ANSI を表示幅として数えているANSI に対応した wcwidth/書記素の計測を使用する
カーソルが絵文字を分割するコードポイント単位で移動している書記素クラスタ単位で移動する
枠線が崩れて見えるフォントまたは幅の不一致ASCII モードを用意し、一般的なフォントでテストする
エラーが赤色だけで示される色だけに意味を持たせているテキスト/アイコン/ラベルを追加し、コントラストを確認する
スクリーンリーダーで使えない全画面を再描画するグリッドTUI 以外のモードと行単位の操作フローを用意する

参考ファイル

  • references/text-measurement.md - Unicode の幅、書記素、絵文字、BiDi、ANSI の計測。
  • references/accessibility-fallbacks.md - 色のポリシー、スクリーンリーダー向けの代替手段、包括的な UX のチェックリスト。

コメント