Vercelが公開したAgent Skillsが便利な気がしたので早速Claude Codeに入れてみた

こちらの記事を読む前に

このSkillsが公開されてすぐの時点では「あのVercelが出した公式Skillだ！」とワクワク100％だったのだが、実際に丸一日触った結果正直有用とは言えず、現在では筆者環境からはアンインストールしている。

自省の意味も込めてこの記事は残したままにしておくが、今後こちらの技術に触れる方は私と同じ間違いをすることのないよう注意していただきたい。

---

以下本文

1月15日木曜日、VercelがReactとNext.jsの最適化ノウハウを詰め込んだAgent Skillsを公開した。10年以上の本番運用で培った知見が45のルールにまとまっているらしい。

これは入れるしかない。

そもそもAgent Skillsって何？

Agent Skillsは、AIコーディングエージェント（Claude Code、Cursor、Codexなど）に特定の知識やワークフローを追加できる仕組みだ。スキルをインストールすると、エージェントがコードを書いたりレビューしたりする際に、そのスキルの知識を参照してくれる。

例えば「このコンポーネントを最適化して」と頼むと、スキルに書かれたベストプラクティスに基づいて具体的な改善案を出してくれる。

最近だとPlaywright MCPの代替となりうるagent-browserが公開されたことが記憶に新しい。
MCPサーバーとしてではなくCLIコマンドとして動作し、Claude CodeなどのAIエージェントからはSkillsファイルを通じて必要に応じて呼び出す仕組みになっている。
MCPよりもこうしたSkillsベースのアプローチが今後スタンダードになっていく気がする。

インストールしてみる

インストールはびっくりするほど簡単だった。

npx add-skill vercel-labs/agent-skills

これだけ。実行すると対話形式でセットアップが始まる。

┌   add-skill
│
◇  Source: https://github.com/vercel-labs/agent-skills.git
│
◇  Repository cloned
│
◇  Found 2 skills
│
◇  Select skills to install
│  vercel-react-best-practices, web-design-guidelines

面白いのは、マシンにインストールされているAIエージェントを自動検出してくれるところ。自分の環境では5つ検出された。
curlでgithubから.claude/skills/vercel-react-best-practicesにスキル用のフォルダを作ってクローンする派の自分からしたらあまりにも楽で全部これになって欲しいと思った本当に。

◇  Detected 5 agents
│
◇  Select agents to install skills to
│  OpenCode, Claude Code, Codex, Cursor, VSCode

全部選択すると、各エージェントのスキルディレクトリに一括でインストールしてくれる。
デフォルトで全部選択になっているのでもし嫌だなーとなったら外そう。

◆  Successfully installed 10 skills
│
│    ✓ vercel-react-best-practices → Claude Code
│      ~/.claude/skills/vercel-react-best-practices
│
│    ✓ web-design-guidelines → Claude Code
│      ~/.claude/skills/web-design-guidelines

1コマンドで5つのエージェント × 2つのスキル = 10件のインストールが完了。便利。

vercel-react-best-practicesの中身

せっかくなので中身を見てみよう。このスキルはReactとNext.jsのパフォーマンス最適化に特化している。

8カテゴリ、45ルール

ルールは影響度順に8つのカテゴリに分類されている。

優先度	カテゴリ	影響度
1	ウォーターフォール排除	CRITICAL
2	バンドルサイズ最適化	CRITICAL
3	サーバーサイド性能	HIGH
4	クライアントサイドフェッチ	MEDIUM-HIGH
5	再レンダリング最適化	MEDIUM
6	レンダリング性能	MEDIUM
7	JavaScript性能	LOW-MEDIUM
8	高度なパターン	LOW

優先度1と2がCRITICALになっているのが興味深い。Vercelの公式ブログにはこう書かれている。

If a request waterfall adds 600ms of waiting time, it doesn't matter how optimized your useMemo calls are.

ウォーターフォールで600ms遅れているなら、useMemoをいくら最適化しても意味がない。まずは影響の大きいところから潰していくという考え方だ。

具体例：ウォーターフォールの排除

公式ブログに載っていた例がわかりやすかったので紹介する。

悪い例：

async function handleRequest(userId: string, skipProcessing: boolean) {
  const userData = await fetchUserData(userId)

  if (skipProcessing) {
    // skipProcessingがtrueでも、上でuserDataを待ってしまっている
    return { skipped: true }
  }

  return processUserData(userData)
}

良い例：

async function handleRequest(userId: string, skipProcessing: boolean) {
  if (skipProcessing) {
    return { skipped: true }
  }

  // 必要なときだけフェッチする
  const userData = await fetchUserData(userId)
  return processUserData(userData)
}

早期リターンを先に書くだけで、不要なAPIコールを減らせる。こういう「知っていれば簡単だけど、見落としがち」なパターンが45個まとまっている。
生成AIに初めから完璧なコードを書かせようとするよりも、作ったコードを修正するツールを発展させていく考えは正直最高だと思う。大好き。

web-design-guidelinesの中身

もう一つのスキルはUIデザインのガイドラインだ。こちらはVercel Design Teamが作成したもので、数百の設計判断がまとまっている。

主要なカテゴリ

カテゴリごとにいくつかピックアップしてみる。

Interactions

• キーボード操作は全ての機能で使えるようにする（WAI-ARIA準拠）
• ヒットターゲットの最小サイズはモバイルで44px
• 楽観的更新（Optimistic updates）でUXを向上させる
• URLで状態管理する（共有・リロード・戻る/進むが壊れない）

Animations

• prefers-reduced-motion対応は必須
• GPU加速プロパティ（transform, opacity）を優先
• transition: allは禁止（意図しないプロパティがアニメーションする）

Forms

• Enterキーで送信できるようにする
• 送信ボタンは常に有効にしておく（送信中のみ無効化）
• エラーは該当フィールドの近くに表示し、送信時は最初のエラーにフォーカス

Performance

• React ScanやDevToolsで再レンダリングを追跡する
• 大きなリストは仮想化する（virtuaなど）
• プリロードはabove-the-foldのみ

実際に使ってみた感想

入れたばかりでなんとも言えない。
pr-preview-toolkitの時のような驚きに出会えて、かつ僕の筆が乗っていたら追記しようと思う。

2026/01/16追記
今の所これほんとにええんか？となっている。
Skillsを使って書いたコードをレビューする時に手直しすることの方が多くて、この記事を書いたというサンクコストもあって信じたくはないがそんなに有用とは今のところ思えない。
なんならこれを使う時はここに記載されているコードがあれば要注意くらいの気持ちで見るのがいいんじゃないかとすら思っている。

まとめ

Vercel Agent Skillsのインストール方法と中身を紹介した。

• npx add-skill vercel-labs/agent-skillsで一発インストール
• 5つのAIエージェントに一括で入る
• vercel-react-best-practicesは45のパフォーマンス最適化ルール
• web-design-guidelinesはUIデザインのガイドライン

ReactやNext.jsで開発している人は内容をよく読んでから入れよう。
他にもこんなSkillsがあったよ！自分はこれを使っている！という意見があればぜひお聞かせ願いたい。

参考リンク

• Vercel Blog - Introducing: React Best Practices
  https://vercel.com/blog/introducing-react-best-practices
• Vercel Design Guidelines
  https://vercel.com/design/guidelines
• GitHub - vercel-labs/agent-skills
  https://github.com/vercel-labs/agent-skills