mcpField
W
web-design-guidelines

web-design-guidelines

github.com/laguaguデザイン・UI70187 回インストール今日更新
リポジトリ

web-design-guidelines について

Web Interface Guidelinesに照らしてファイルを確認するレビュー用スキルです。最新のルールを取得して指定ファイルを調べ、ファイル名と行番号で結果を示します。ファイルがない場合は対象を確認します。

主な機能

  1. 01最新のインターフェース指針を取得
  2. 02指針に沿ってファイルを確認
  3. 03追加のアクセシビリティ項目を確認
  4. 04file:line形式で問題を報告

活用シーン

  1. 01インターフェースファイルの指針適合確認
  2. 02レビュー時のアクセシビリティ確認
  3. 03ファイルパターン指定でのレビュー

インストール

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

$npx skills add https://github.com/laguagu/claude-code-nextjs-skills --skill web-design-guidelines

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

同梱ファイルreferences/command.mdreferences/LICENSE

詳細

Web インターフェースガイドライン

ファイルが Web インターフェースガイドラインに準拠しているか確認します。

動作の仕組み

  1. 以下のソース URL から最新のガイドラインを取得します

  2. 指定されたファイルを読み込みます（または、ユーザーにファイルやパターンを尋ねます）

  3. 取得したガイドラインに含まれるすべてのルールと照合します

    2026-10-11 時点で、command.md には一部のアクセシビリティチェックが記載されていません。アクセシビリティのレビューでは、コントラスト（WCAG 2.2 AA：テキストは 4.5:1、大きなテキストおよび必須の非テキスト UI コントラストは 3:1。ただし適用される例外があります）、状態を色だけで示さないこと、ターゲットサイズ（WCAG 2.5.8：例外を除き 24×24 CSS px 以上。タッチ操作での 44px は推奨事項です）、モバイル入力のフォントサイズが 16px 以上であること、モーダルダイアログへのフォーカス移動とダイアログからのフォーカス復帰を、APG のダイアログパターンに従っていることも確認してください。

  4. 調査結果は簡潔な file:line 形式で出力します

ガイドラインのソース

レビューのたびに、最新のガイドラインを取得してください：

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

利用可能な Web ツールまたはシェルツールを使用して、ルール一式を取得してください。Claude Code の WebFetch など、要約を返す取得ツールではルールが省略されることがあります。シェルがネットワークに接続できる場合は、代わりに curl で raw URL を取得してください。Web にアクセスできない場合は、固定スナップショット references/command.md を使用し、レビューでスナップショットを使用したこととその日付を伝えてください。

使用方法

ユーザーがファイルまたはパターンの引数を指定した場合：

  1. 上記のソース URL からガイドラインを取得します
  2. 指定されたファイルを読み込みます
  3. 取得したガイドラインのすべてのルールを適用します
  4. ガイドラインに指定された形式で調査結果を出力します

ファイルが指定されていない場合は、レビューするファイルをユーザーに尋ねてください。

コメント

Markdown 対応