タスク用スキル
Vercel Agent Skills
Vercel の指針で AI のフロントエンド性能・画面レビューを支えます。
紹介
公開ドキュメントに基づき LessAI Tools が編集
フロントエンド開発と画面レビューの作業指示です。React、Next.js の開発や、性能、アクセシビリティ、使いやすさの確認に向きます。README の対応方法で必要なスキルを選んで導入し、自分のプロジェクトに合うか確かめます。
このタスクで使ったスキル: web-design-guidelines
使い始める
必要な条件を確認し、アシスタントを選んで接続手順を見てください。
- 準備するもの
- スキル対応の AI 助手。
- Skills CLI には Node.js と npm が必要です。必要なスキルだけ選びます。
- 費用
- コードはオープンソースです。助手の利用料と外部サービスの枠は別です。
- 必要な権限
- 確認用はファイルを読み、公開用はまとめてアップロードします。最初は確認を選び公開は別に許可します。Skills CLI に匿名統計と停止案内があります。
Codex手動設定が必要
Skills CLI を使い、導入時に助手とスキルを選びます。
接続手順
- README の導入節と Skills CLI 案内を開きます。
- vercel-labs/agent-skills で必要なものを選び対象を Codex にします。
- 助手にスキルが表示されるか確認し、必要なら会話を開き直します。
接続結果の確認方法
web-design-guidelines で一ページのキーボード操作を調べ、具体的な指摘を求めます。
公式資料
Claude Code手動設定が必要
Skills CLI を使い、導入時に助手とスキルを選びます。
接続手順
- README の導入節と Skills CLI 案内を開きます。
- vercel-labs/agent-skills で必要なものを選び対象を Claude Code にします。
- 助手にスキルが表示されるか確認し、必要なら会話を開き直します。
接続結果の確認方法
web-design-guidelines で一ページのキーボード操作を調べ、具体的な指摘を求めます。
公式資料
Cursor手動設定が必要
Skills CLI を使い、導入時に助手とスキルを選びます。
接続手順
- README の導入節と Skills CLI 案内を開きます。
- vercel-labs/agent-skills で必要なものを選び対象を Cursor にします。
- 助手にスキルが表示されるか確認し、必要なら会話を開き直します。
接続結果の確認方法
web-design-guidelines で一ページのキーボード操作を調べ、具体的な指摘を求めます。
公式資料
公式資料
接続情報の確認日 2026-10-12 · 公開ドキュメントに基づく案内です。全項目を個別にインストールして検証したものではありません。
できること
- React と Next.js の性能指針を使う
- アクセシビリティと使いやすさを確認する
- 作業に合うスキルを選んで導入する
公式プロジェクトとドキュメント
プロジェクトの説明（翻訳）
Vercel 公式エージェントスキル集
用途が近いプラグイン
主な用途を優先し、共通する作業とスター数を参考に選んでいます。接続方法は異なる場合があります。
- Claude Code Official Plugins — レビュー、画面設計、MCP 開発の Claude Code プラグインを選びます。
- Codex Plugins & Built-in Tools — ブラウザーの作業、コーディング、デザイン、オフィス ファイル、ビデオに関する Codex の機能と、実際のセットアップ要件を見つけてください。
- Vue Skills — Vue 3 の部品、画面遷移、状態管理、テストを AI に案内します。