1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

58万インストールのVercel製UIレビュースキル、中身は39行でルールが1件もない

1
Posted at

インストール数587,920件(2026年8月29日時点、Skillselionカタログ)のVercel製UIレビュースキルには、アクセシビリティのルールが1件も入っていません。Vercelのweb-design-guidelinesスキルとしてインストールされるファイルはフロントマター込みで39行。チェックするルールはすべて別リポジトリにあり、レビュー実行のたびにmainブランチを追跡するURLから取得されます。

私たちはSkillselionというClaude Code / Codex / Cursor拡張のディレクトリを運営しており、コミットb8caa26時点のvercel-labs/agent-skillsを読んでこのスキルの詳細解説を書きました。この設計が実際のレビューに何をもたらすかを整理します。

ファイルの正体は「ルールを取りに行け」という指示

設計全体を決めているのは、SKILL.md内のこの一文です。

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

何をチェックするかも、結果をどう出力するかも、どちらも外部にあります。READMEは「アクセシビリティ、パフォーマンス、UXをカバーする100以上のルール」と宣伝していますが、その数字はスキルファイルのどこにも出てきません。レビュー実行時にダウンロードで届く数字です。

つまりこのスキルはネットワークを前提にしており、しかもWebFetchというClaude Code固有のツール名を名指しで要求します。サンドボックス化されたCIランナーや、同等のフェッチツールを持たないエージェントでは、スキルは読み込まれてトリガーもされるのに、照合するルールが何もない状態になります。

ルールは8月18日に変わった。インストール済みのファイルは変わっていない

取得先はraw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.mdです。mainはブランチです。GitHubのコミット履歴を見ると、このパスには5件のコミットがあり、うち3件が2026年8月18日付。アクセシビリティとメディアのルール追加、引用符ガイダンスの改訂が入っています。

7月にクリーンだったコンポーネントが、コードを1行も変えていないのに8月には指摘付きで返ってくる。原因のdiffはvercel-labs/web-interface-guidelinesという、依存もしていなければ監視も頼まれていないリポジトリの中にあります。Vercelがルールを改善すれば自分のレビューも良くなるという意図は理解できますが、その代償として再現性を失います。

レビュー結果を固定したいチームには従来どおりの逃げ道があります。ルールファイルを自分のリポジトリにベンダリングして、エージェントにはそのコピーを見せることです。

取得されるルール表には「数字の入ったルール」が欠けている

Vercelはガイドラインリポジトリで3つのルール文書を公開しています。2026年8月20日時点で、READMEは129項目、AGENTS.mdはMUST / SHOULD / NEVER形式で107項目、そしてこのスキルがハードコードしているcommand.mdは103項目です。

欠け方には偏りがあります。AGENTS.mdの「Targets & Input」節には、command.mdに対応物がないMUSTルールが2つあります。タップターゲット最小24px(モバイルは44px)と、iOS Safariのフォーカス時ズームを防ぐモバイル入力フォント最小16pxです。フォーカス管理やツールチップのタイミング、READMEのDesign節の大半もcommand.mdには落ちています。

このスキルに「タップターゲットは十分な大きさか?」と聞いても、返ってくるのは推測です。取得されたルール表に最小サイズの規定はなく、しかもその質問が対象外だったことはレポートのどこにも書かれません。

カバーしている範囲は良質です。アイコンボタンへのaria-label、セマンティック要素、focus-visibleリング、フォームのautocomplete、コンポジタで完結するアニメーション、Intlによるフォーマットなど。問題は品質ではなく、部分集合であることです。

これはテンプレートであり、コピーはVercelの編集を継承し続ける

同じリポジトリには文章レビュー版のwriting-guidelinesスキルがあります。web-design-guidelinesと差分わずか5行(名前、説明、見出し、要約、URL)。任意のmarkdown URLをこの方法でレビュースキル化できる一方、この作りのスキルはすべて実行時にネットワークを必要とし、他人が管理するブランチに追従します。

エージェントスキル・クローン調査(2026年8月12日固定)では、web-design-guidelinesはカタログ内で2番目にコピーされたオリジナルです。同一またはほぼ同一のコピーが36件、1位はAnthropicのfrontend-designで59件でした。各コピーは例の1本のURLを継承するため、URLをそのまま引き継いだコピーは毎回Vercelのルールを取得し、Vercelの編集を継承し続けます。フォークとしてはかなり珍しい性質です。

対照的なのが同じリポジトリの兄弟スキル、React向けのvercel-react-best-practicesです。こちらはインストール後にルールファイル70本がディスク上に揃います。同じ作者で、正反対のアーキテクチャです。

入れるべきか

Claude CodeでUIレビューをしていて、その回のモデルの好みではなく公開された外部標準でチェックを走らせたいなら、入れる価値があります。取得先のルール自体は本当に良くできていて、最新に保つコストはレビュー1回につきフェッチ1回です。

エージェントがネットワークなしで動く環境なら、あるいはレビューに再現性が必要なら、見送ってルール表をベンダリングしてください。

生成側の対になる文書はガイドラインリポジトリのAGENTS.mdです。スキルはレビュー用、AGENTS.mdは生成用という意図的なペアで、スキルをインストールしてもAGENTS.mdはプロジェクトに入りません。

開発者が実際に比較検討するデザイン系スキルはフロントエンドデザイン向けスキルのまとめに揃えています。Anthropicのfrontend-designはデザインブリーフの下でUIを生成し、Paul Bakausのimpeccableはデザインプレイブックを適用し、ui-ux-pro-maxはパレットとWCAG基準を引き、design-taste-frontendはランディングページ向けのテイストレイヤーです。この5つの中でweb-design-guidelinesだけが何も生成しません。既にあるファイルを採点します。

引用はすべて記載コミット時点のリポジトリと照合済みです。セクションごとの検証は詳細解説の全文、シリーズ一覧はDeep Dives、カタログ全体はスキルディレクトリにあります。

開示: 私たちはSkillselionを運営しています。数値はskills.sh、GitHub、MCPレジストリから毎日更新されるライブカタログのもので、実インストール数でランキングしています。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?