mcpField
W
web-design-guidelines

web-design-guidelines

github.com/vudovnデザイン・UI8.2k240 回インストール9 週間前に更新
リポジトリ

web-design-guidelines について

Web Interface Guidelines に照らしてファイルをレビューするスキルです。最新ルールを取得して指定ファイルを確認し、所定の形式で指摘事項を報告します。

主な機能

  1. 01最新のWebインターフェースルールを取得
  2. 02指定ファイルやパターンをレビュー
  3. 03アクセシビリティ、性能、実践項目を確認
  4. 04ファイルと行番号の簡潔な形式で報告

活用シーン

  1. 01実装後のウェブページを監査
  2. 02更新された指針に基づくファイル確認
  3. 03ファイルと行番号で指摘事項を特定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vudovn/ag-kit --skill web-design-guidelines

インストール後、Claude Code で/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. ガイドラインで指定された形式を使って指摘事項を出力します

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

関連スキル

スキル使用するタイミング
frontend-designコーディング前 — デザイン原則（色、タイポグラフィ、UX 心理学）を学ぶ
web-design-guidelines（このスキル）コーディング後 — アクセシビリティ、パフォーマンス、ベストプラクティスを監査する

デザインワークフロー

1. DESIGN   → Read frontend-design principles
2. CODE     → Implement the design
3. AUDIT    → Run web-design-guidelines review ← YOU ARE HERE
4. FIX      → Address findings from audit

コメント

Markdown 対応