web-design-guidelines

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

Web インターフェースガイドラインへの準拠状況を確認します。

動作の仕組み

1. 以下のソース URL から最新のガイドラインを取得します
2. 指定されたファイルを読み込みます（またはユーザーにファイルやパターンを尋ねます）
3. 取得したガイドラインのすべてのルールに照らして確認します
4. 簡潔な file:line 形式で指摘事項を出力します

ガイドラインのソース

レビューのたびに最新のガイドラインを取得します。

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

WebFetch を使用して最新のルールを取得します。取得した内容には、すべてのルールと出力形式の指示が含まれています。

使用方法

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

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

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

指摘事項の修正

問題を特定したら、ui-ux-pro-max を使用して、カテゴリーごとの詳しい修正ガイダンスを取得します。

# Accessibility findings
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux

# Form UX findings
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux

# Animation / motion findings
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux

# Navigation findings
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux

# Performance / layout findings
python3 skills/ui-ux-pro-max/scripts/search.py "layout shift lazy loading performance" --domain ux

監査結果を、上記の最も近い領域キーワードに対応付けます。ui-ux-pro-max のクイックリファレンス（セクション 1～9）では、ガイドラインチェッカーが検出するすべてのカテゴリーを扱っています。

関連スキル

• ui-ux-pro-max：すべての指摘カテゴリーに対する詳しい UX ガイダンスと修正ルール
• frontend-design：コードを書く前のデザイン方針と計画
• ui-styling：修正にコンポーネントレベルの変更が必要な場合のコンポーネント実装 — shadcn/ui と Tailwind