web-design-guidelinesスキルでUIのアクセシビリティとUXをレビューする方法

Webアプリケーションのアクセシビリティやユーザビリティは、開発中に見落とされがちなポイントです。リリース後に問題が見つかると、修正コストが大きくなります。

この記事では、Web Interface Guidelinesへの準拠をレビューするweb-design-guidelinesスキルの使い方を解説します。

このスキルは何をしてくれるのか

web-design-guidelinesは、UIコードをWeb Interface Guidelinesに照らし合わせてレビューするスキルです：

Vercel Labsが公開するガイドラインを自動取得
指定したファイルやパターンに対してルールを適用
file:line形式で問題箇所を特定
アクセシビリティ、UX、デザインのベストプラクティスをチェック

UIの品質を一定水準に保ちたいフロントエンド開発者や、デザインレビューを効率化したいチームに向いています。

インストール方法

前提条件

Claude Codeがインストール済みであること
WebFetchが利用可能（ガイドライン取得に使用）

インストールコマンド

claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/web-design-guidelines

使い方

基本的な使い方

レビューしたいファイルを指定して指示します：

src/components/Button.tsx のUIをレビューして

スキルは以下の手順で動作します：

Vercel Labsのリポジトリからガイドラインを取得
指定されたファイルを読み込み
すべてのルールに対してチェック
file:line形式で問題を出力

パターン指定

ファイルパターンを使って複数ファイルを一括レビューすることもできます：

src/components/**/*.tsx のUIをチェックして

ガイドラインのソース

ガイドラインは以下のURLから取得されます：

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

レビューのたびにガイドラインを取得するため、ルールの更新が自動的に反映されます。

知っておくべき注意点

インターネット接続が必要

このスキルはガイドラインをWebから取得するため、オフライン環境では動作しません。

ファイル指定が必要

ファイルやパターンを指定しない場合、スキルはどのファイルをレビューすべきか確認します。事前にレビュー対象を決めておくとスムーズです。

出力形式は簡潔

結果はfile:line形式の簡潔な出力です。各指摘の詳細な説明が必要な場合は、ガイドラインの該当ルールを参照してください。

まとめ

web-design-guidelinesスキルを使うと、UIコードのアクセシビリティとUXをWeb Interface Guidelinesに基づいてレビューできます。ガイドラインが自動取得されるため、つねに最新のルールでチェックが行われます。

詳細な仕様やオプションは、スキル詳細ページをご確認ください。