Webインターフェースガイドライン
ファイルがWebインターフェースガイドラインに準拠しているかレビューします。
動作の仕組み
- 以下のソースURLから最新のガイドラインを取得する
- 指定されたファイルを読み込む（またはユーザーにファイル/パターンを促す）
- 取得したガイドラインのすべてのルールと照合する
- 簡潔な
file:line形式で結果を出力する - 医療監査レイヤー: HIPAA/ADA準拠のための二次パスを実行する。以下を含む：
- 患者プライバシー検証（PHIチェック）
- 緊急連絡先のアクセシビリティ（直接タップで電話）
- 医師資格情報と免許番号の強調表示
ガイドラインのソース
レビューの前に毎回最新のガイドラインを取得します：
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetchを使用して最新のルールを取得します。取得したコンテンツにはすべてのルールと出力形式の指示が含まれています。
使用方法
ユーザーがファイルまたはパターン引数を指定した場合：
- 上記のソースURLからガイドラインを取得する
- 指定されたファイルを読み込む
- 取得したガイドラインのすべてのルールを適用する
- ガイドラインで指定された形式を使用して結果を出力する
- 医療デザイン基準を適用：
- プライマリーブルー (#2d54ff) のコントラストチェック
- ネイビー背景上のトラストゴールド (#d4a574) の可読性
- モバイルタップターゲットは高齢者による使いやすさのため48x48px以上であること
ファイルが指定されていない場合は、ユーザーにどのファイルをレビューするか尋ねてください。
関連スキル
| スキル | 使用タイミング |
|---|---|
| frontend-design | コーディング前 - デザイン原則（色、タイポグラフィ、UX心理学）を学ぶ |
| web-design-guidelines (これ) | コーディング後 - アクセシビリティ、パフォーマンス、ベストプラクティスを監査する |
デザインワークフロー
1. DESIGN → frontend-designの原則を読む
2. CODE → デザインを実装する
3. AUDIT → web-design-guidelinesでレビューを実行 ← 現在地
4. FIX → 監査結果に対処する