web-design-guidelines について
web-design-guidelinesは、Web Interface Guidelinesに照らしてUIコードやサイトをレビューするスキルです。最新ルールを取得し、ファイル名と行番号付きで簡潔に指摘します。
主な機能
- 01最新のガイドライン取得
- 02UIコードとサイトの監査
- 03アクセシビリティ・UX・設計慣行の確認
- 04ファイル名と行番号での指摘
活用シーン
- 01指定されたUIファイルのレビュー
- 02サイトのアクセシビリティ監査
- 03更新ルールに基づく画面の再確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/web-design-guidelinesを入力して読み込まれたか確認します。
詳細
Web インターフェイスガイドライン
Web インターフェイスガイドラインへの準拠状況を確認するため、ファイルをレビューします。
このスキルを使用する場面
次のような場合に、このパターンを使用します。
- Web インターフェイスガイドラインに照らして UI コードを監査する。
- アクセシビリティ、UX、またはデザインのベストプラクティスへの準拠状況を確認するため、サイトをレビューする。
- ガイドラインに基づくレビューの結果を、簡潔な
file:line形式で報告する。 - 報告の前に、最新の上流ガイドラインのルールを使ってインターフェイスを再確認する。
仕組み
- 以下のソース URL から最新のガイドラインを取得します
- 指定されたファイルを読み込みます（または、ユーザーにファイルやパターンを尋ねます）
- 取得したガイドラインのすべてのルールに照らして確認します
- 簡潔な
file:line形式で指摘事項を出力します
ガイドラインのソース
レビューのたびに、最新のガイドラインを取得します。
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
WebFetch を使用して最新のルールを取得します。取得した内容には、すべてのルールと出力形式の指示が含まれています。
使い方
ユーザーがファイルまたはパターンの引数を指定した場合：
- 上記のソース URL からガイドラインを取得します
- 指定されたファイルを読み込みます
- すべてのルールを適用します
- ガイドラインで指定された形式を使って指摘事項を出力します
ファイルが指定されていない場合は、レビューするファイルをユーザーに尋ねます。
コメント
Markdown 対応