Vercel公式のAI武装術！agent-skillsでブラック現場を定時退社するエンジニアの知恵

vercel-labs/agent-skills

これを使いこなせば、君の相棒である AI エージェント（Claude Code や Cursor など）が、まるで「Vercel のシニアエンジニア」が憑依したかのような動きを見せるようになるんだ。

ブラック企業の新人くんと、ベテラン（？）エンジニアのやり取りを交えながら、楽しく見ていこう！

新人（君）
「はぁ……。社長から『明日までに React のパフォーマンスを極限まで高めたサイトを公開しろ。無理なら帰るな』って言われちゃいました。もう無理、コード書く手が震えてます……」

先輩
「おいおい、まだ手作業でレビューしてんのか？ 今どきは Agent Skills を使うんだよ！」

新人
「エージェント……スキル？ 必殺技ですか？」

先輩
「そう、AI に『Vercel 直伝の知恵』をインストールする必殺技だ。これさえあれば、AI が勝手に『あー、ここレンダリング無駄だね、修正しとくわ』ってやってくれるのさ。ほら、これを見てみろ！」

一言で言うと、「AI エージェント用の追加能力パック」だよ。

通常、AI（Cursor や Claude Code など）は一般的な知識は持っているけれど、特定のプロジェクトの最適解や最新のベストプラクティスを 100% 把握しているわけじゃない。 このリポジトリは、Vercel が培った React/Next.js の最適化ルールやデプロイ手順などを、AI が理解・実行できる形式（.md やスクリプト）でパッケージ化したものなんだ。

コード品質の向上
Vercel 公式の React ベストプラクティス（40 以上のルール）を AI が自動で適用してくれる。

レビューの自動化
アクセシビリティや UX、パフォーマンスのチェック（100 以上のルール）を AI が代行。

爆速デプロイ
会話の中で「じゃあデプロイしといて」と言うだけで、Vercel へのデプロイまで完結する。

導入はめちゃくちゃ簡単。ターミナルで以下のコマンドを叩くだけさ。

npx skills add vercel-labs/agent-skills

これを実行すると、対話形式で「どのエージェント（Claude Code, Cursor, VS Code 等）にインストールするか」を聞かれるから、使っているツールを選択すれば OK。

スキルを導入した後、君の AI エージェント（例
Claude Code）にこう話しかけてみて。

AI が react-best-practices スキルを使って、コードを添削してくれるよ。

君
「このコンポーネントを react-best-practices に基づいてレビューして。特にレンダリングの最適化をお願い。」

deploy-claimable スキルを使えば、プロジェクトを即座に Vercel へアップロードできる。

君
「今の状態を Vercel にデプロイして。」

AI
「了解！ プロジェクトを固めて Vercel に送るね。……完了！ プレビュー URL はこれだよ
https://project-xyz.vercel.app」

新人
「うおおお！ npx skills add して指示したら、AI が一瞬でアクセシビリティの問題を直して、パフォーマンスも爆速にしてデプロイまで終わらせちゃいました！」

先輩
「だろ？ これで定時上がりだな。」

社長
「おーい！ 終わったのか？ じゃあ、ついでに Rust で書き直して、バックエンドも自作 OS に載せて明日までに納品してくれ！」

新人・先輩
「……逃げろ！！！」

vercel-labs/agent-skills は、単なるドキュメントじゃなく、「AI に直接教え込むための知恵」。 これを使って、無駄なリテイクを減らして、少しでも早く帰れるようにしよう！