鉄の掟
ファイルをレビューする前に、必ずライブのガイドラインを取得すること。覚えたルールや推測したルールを適用せず、常にソースURLから新しいルールを取得すること。WebFetchが失敗した場合は、その失敗を報告し、推測ルールで処理を進めてはなりません。
Webインターフェースガイドラインレビュー
UIコードをVercelのWebインターフェースガイドラインに照らして監査します。構造化された
file:line形式で結果を出力します。
このスキルを使用するタイミング
ユーザーが次のように依頼した場合にこのスキルを読み込んでください：
- 「UIをレビューして」
- 「アクセシビリティをチェックして」
- 「デザインを監査して」
- 「UXをレビューして」
- 「サイト/コンポーネントをガイドラインに照らしてチェックして」
- PRの前にデザインコンプライアンスチェックを実行する
動作の仕組み
- ガイドラインを取得 — WebFetchを使用してソースURLから最新のルールを取得する
- ファイルを読み取る — 指定されたファイルを読み取る（またはユーザーにどのファイル/パターンをレビューするか尋ねる）
- ルールを適用 — 取得したガイドラインのすべてのルールをすべてのファイルにチェックする
- 結果を出力 —
file:line: [違反ルール]形式で違反を報告する
ガイドラインのソース
各レビューセッションの前に新しいガイドラインを取得してください：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetchを使用して最新のルールを取得します。取得したコンテンツにはすべてのルールと出力形式の指示が含まれています。セッション間でルールをキャッシュしたり記憶したりしないでください — 常に新しいルールを取得してください。
使用方法
ユーザーがファイルまたはパスパターンを指定した場合：
- ソースURLからガイドラインを取得する
- 指定されたファイルを読み取る
- 取得したガイドラインのすべてのルールを適用する
- ガイドラインで指定された形式で結果を出力する
ファイルが指定されていない場合：
ユーザーに尋ねてください：「どのファイルまたはディレクトリをレビューしますか？（例：src/app/features/dashboard/ または *.component.html）」
出力形式
取得したガイドラインで指定された形式に正確に従ってください。デフォルトの構造：
file:line — [ルール名]: [違反の説明]
例：
dashboard.component.html:34 — 空状態: ゼロデータ条件に対する空状態が定義されていません
dashboard.component.html:67 — フォーカス管理: インタラクティブ要素に可視フォーカスインジケーターがありません
order-list.component.ts:89 — ローディング状態: 非同期操作にローディングフィードバックがありません
障害処理
WebFetchがガイドラインURLの取得に失敗した場合：
- 報告：「ソースURLからWebインターフェースガイドラインを取得できませんでした。取得に失敗しました：[エラー]」
- 推測ルールや記憶ルールで処理を進めない
- 提案：「もう一度試すか、raw.githubusercontent.comへのネットワークアクセスを確認してください」
フェッチが失敗した場合、ルール違反を捏造してはいけません。
レビュースタックでの位置づけ
このスキルはUIレビューの3番目の層です。完全なカバレッジを得るには3つすべてを実行してください：
| 層 | ツール | 検出内容 |
|---|---|---|
| 層1 — デザイントークン | /lint-design-system | ハードコードされた色、 生のスペーシング、 インラインタイポグラフィ、 タッチターゲット違反 |
| 層2 — WCAGアクセシビリティ | accessibility-auditor エージェント | コントラスト比、 ARIAラベル、 キーボードナビゲーション、 セマンティックHTML |
| 層3 — Webインターフェースパターン | web-design-guidelines（このスキル） | ローディング状態、 空状態、 エラーハンドリング、 インタラクションパターン、 フォーカス管理 |
関連スキル
frontend-design— 美的方向性とDFIIスコアを確立するために、このスキルの前に実行するdesign-system— トークンコンプライアンスの適用（Angular + Flutter）angular-ui-patterns— Angular固有のローディング/エラー/空状態のドクトリンaccessibility-audit— WCAG 2.1 AAコンプライアンス監査