Webインターフェースガイドライン
ファイルをWebインターフェースガイドラインに準拠しているかレビューします。
動作方法
- 以下のソースURLから最新のガイドラインを取得
- 指定されたファイルを読み込む(またはユーザーにファイル/パターンを促す)
- 取得したガイドラインのすべてのルールと照合
- 結果を簡潔な
file:line形式で出力
ガイドラインのソース
レビュー前に毎回新しいガイドラインを取得します:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetchを使用して最新のルールを取得します。取得したコンテンツにはすべてのルールと出力形式の指示が含まれています。
使用方法
ユーザーがファイルまたはパターン引数を指定した場合:
- 上記のソースURLからガイドラインを取得
- 指定されたファイルを読み込む
- 取得したガイドラインのすべてのルールを適用
- ガイドラインで指定された形式を使用して結果を出力
ファイルが指定されていない場合は、ユーザーにレビューするファイルを尋ねます。
問題の修正
問題を特定した後、ui-ux-pro-maxを使用してカテゴリごとに詳細な改善ガイダンスを取得します:
# アクセシビリティに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "accessibility contrast aria keyboard" --domain ux
# フォームUXに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "forms validation error feedback" --domain ux
# アニメーション/モーションに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "animation reduced-motion timing" --domain ux
# ナビゲーションに関する発見事項
python3 skills/ui-ux-pro-max/scripts/search.py "navigation breadcrumb back behavior" --domain ux
# パフォーマンス/レイアウトに関する発見事項
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 — コンポーネントレベルの変更が必要な修正に使用