vercel-skills

vercel-skills

カタログの仮エントリー — 完全なパッケージ：vercel-labs/skills

判断フロー

Vercel のスキルワークフローを使用する前に、以下を実行してください。

1. Vercel スキルはすでにインストールされていますか？ 確認方法：~/.design-agent-skills/skills/building-components/SKILL.md が存在するか確認します（代表的なスキルです）。

   • はい → スキル名を指定して呼び出し、続行します
   • いいえ → ステップ 2 に進みます

2. シェルにアクセスできますか？

   • はい → 以下の特定のスキルをインストールしてから、呼び出します
   • いいえ → インストールコマンドを表示します。Claude Code では、! で始まるチャットメッセージとして送信します。グローバルにインストールする場合は -g を追加し、プロジェクトのみにインストールする場合は省略します

インストールコマンド

# Review UI code against 100+ Web Interface Guidelines
npx skills add vercel-labs/web-design-guidelines

# Build accessible, composable, themeable UI components
npx skills add vercel-labs/building-components

# React/Next.js performance optimization
npx skills add vercel-labs/react-best-practices

# React component composition and reusable patterns
npx skills add vercel-labs/composition-patterns

注：web-design-guidelines は古いリストである可能性があります。使用前にインストールを確認してください。

インストール後の呼び出し

• web-design-guidelines — 「Web デザインガイドライン」、「UI レビュー」
• building-components — 「コンポーネントを構築」、「アクセシブルなコンポーネント」、「コンポーザブルな API」
• react-best-practices — 「React のパフォーマンス」、「Next.js の最適化」
• composition-patterns — 「コンポジションパターン」、「再利用可能な React パターン」

概要

Vercel 公式のスキルコレクションです。UI コードレビューで 100 以上の Web インターフェースガイドラインを徹底し、アクセシブルでコンポーザブルなコンポーネントアーキテクチャをガイドし、React/Next.js のパフォーマンスを最適化し、再利用可能なコンポーネントのコンポジションパターンを確立します。