
@vercel-labs
開発、運用、インフラ領域をカバー、代表作は find-skills、Reactベストプラクティス、Webデザインガイドライン。
@vercel-labs のすべての Skill
find-skills
by @vercel-labs
ユーザーがエージェントスキルを発見・インストールするのを支援し、「Xを行う方法」や「Xスキルを探す」といった質問に答え、新機能に対するユーザーのニーズを満たします。
agent-browser
by @vercel-labs
AIエージェント向けにブラウザ自動化コマンドラインツールを提供します。ウェブナビゲーション、フォーム入力、ボタンクリック、スクリーンショットなどの操作をサポートし、ウェブサイトとのインタラクションを実現します。
vercel-react-best-practices
by @vercel-labs
VercelがメンテナンスするReactおよびNext.jsアプリケーションのパフォーマンス最適化ガイド。8つのカテゴリと62のルールを含み、開発者が高性能なフロントエンドアプリケーションを構築するのを支援します。
web-design-guidelines
by @vercel-labs
UIコードがウェブインターフェースデザインガイドラインに準拠しているかレビューし、アクセシビリティ、デザイン、ユーザーエクスペリエンスをチェックして、インターフェースの品質と標準を確保します。
vercel-composition-patterns
by @vercel-labs
柔軟で保守性の高いReactコンポーネントを構築するためのReactコンポーネントコンポジションパターンを提供します。複合コンポーネントなどの手法により、ブールプロパティの乱用を回避します。
electron
by @vercel-labs
Chrome DevToolsプロトコルを介してプロキシブラウザを使用し、VS Code、SlackなどのElectronデスクトップアプリケーションを自動化します。
vercel-sandbox
by @vercel-labs
Vercel SandboxマイクロVMでプロキシブラウザとChromeを実行し、Vercelデプロイアプリケーションのブラウザ自動化を実現します。
agentcore
by @vercel-labs
AWS Bedrockクラウドブラウザセッションでagent-browserを実行。すべての標準コマンドに完全対応し、認証情報の解析を自動処理。
vercel-react-native-skills
by @vercel-labs
Vercel公式のReact Nativeインテリジェントエージェントスキルセットで、モバイル開発者がクロスプラットフォームアプリケーションを効率的に構築・デプロイできるよう支援します。
deploy-to-vercel
by @vercel-labs
アプリケーションとウェブサイトをVercelにデプロイし、アプリケーションのデプロイ、リンクの取得、公開などのユーザーリクエストに応答します。
vercel-react-view-transitions
by @vercel-labs
このスキルは、ReactおよびNext.jsアプリケーションでスムーズでネイティブ感のあるビュー遷移アニメーションを実装するのに役立ちます。ReactのView Transition APIを活用し、ページ遷移、コンポーネントの出入り、共有要素、方向性ナビゲーションアニメーションをサポートします。<ViewTransition>コンポーネントと`next/link`の`transitionTypes`プロパティを使用することで、開発者はさまざまな複雑なアニメーション効果を簡単に作成でき、ユーザーエクスペリエンスを向上させ、すぐに使えるCSSアニメーションレシピも提供します。
vercel-cli-with-tokens
by @vercel-labs
CLIとトークン認証を使用してVercelでプロジェクトをデプロイおよび管理し、完全なプロジェクトライフサイクル管理をサポートします。
next-best-practices
by @vercel-labs
ファイル規約、RSC境界、データパターン、非同期API、メタデータ、エラー処理などを含むNext.jsのベストプラクティスを提供し、Next.jsアプリケーション開発を最適化します。
vercel-optimize
by @vercel-labs
この Skill は、Vercel にデプロイされたプロジェクトのコストとパフォーマンスを最適化するために使用されます。特に Next.js、SvelteKit、Nuxt などのアプリケーションに焦点を当てています。Vercel のメトリクス、使用状況、プロジェクト設定、コードスキャン結果を収集し、データに基づいた優先順位付けされた最適化の推奨事項を提供します。これにより、Vercel の請求額を削減し、Core Web Vitals を改善し、関数呼び出しやビルド時間を最適化します。
writing-guidelines
by @vercel-labs
この Skill は、ドキュメントやテキストコンテンツを自動的にレビューし、事前に定義された執筆ガイドラインやスタイルガイドへの準拠を保証します。自動チェックにより、ドキュメントの品質と一貫性が大幅に向上し、手動レビューの時間とエラー率が削減されます。技術文書、API 仕様、ユーザーマニュアル、ブログ記事、マーケティング資料など、あらゆる種類のコンテンツにおいて、この Skill はチームがプロフェッショナルなブランドイメージと明確なコミュニケーション基準を維持し、公開されるすべてのコンテンツが高い水準を満たすことを保証し、コミュニケーション効率とユーザーエクスペリエンスを向上させます。
next-cache-components
by @vercel-labs
Next.js 16のキャッシュコンポーネントを紹介します。PPR、キャッシュディレクティブ、キャッシュライフサイクル、キャッシュタグ、再検証タグが含まれます。
next-upgrade
by @vercel-labs
Next.jsプロジェクトを最新バージョンにアップグレードするようユーザーを案内し、最新機能とパフォーマンス最適化を活用し、開発効率を向上させます。
dogfood
by @vercel-labs
「ドッグフーディング」能力を備え、AIエージェントが自社開発製品を使用することで問題を特定・解決し、製品品質とユーザーエクスペリエンスを向上させます。
slack
by @vercel-labs
ブラウザ自動化を通じてSlackワークスペースと対話し、未読チャンネルの確認、メッセージの送信、データの抽出などを行います。
core
by @vercel-labs
フロントエンドのスキーマ、ディレクトリ、AIプロンプト生成を定義するためのコアパッケージであり、作業効率と自動化能力を向上させます。
codegen
by @vercel-labs
UI仕様からコードを自動生成するユーティリティ集です。ツリー走査、プロパティシリアライズ、カスタムエクスポーターにより、デザインを標準化されたコンポーネントコードに迅速に変換し、手動コーディングのミスを削減し、フロントエンド開発の効率を向上させます。
devtools
by @vercel-labs
このスキルは、json-renderアプリケーションのデバッグ用インスペクターパネルを即座に提供します。UI要素ツリー、実行時状態、アクションログ、ストリームパッチを検査でき、レンダリング問題の迅速な特定、状態編集、仕様探索を可能にし、カスタムデバッグツール構築の手間を省き、デバッグ効率を大幅に向上させます。
mcp
by @vercel-labs
MCPサーバーを構築し、Claude、ChatGPT、CursorなどのクライアントでJSON仕様を通じてインタラクティブなUIをレンダリングするツールキット。json-renderコアとMCPプロトコルをラップし、UI構造とコンポーネントを定義するだけで動的なUIを統合でき、MCPアプリのフロントエンド開発コストを大幅に削減します。
portless
by @vercel-labs
Portlessツールの使用法を習得し、ローカル開発サーバーに名前付きURLを設定することで、開発環境の構成を簡素化し、複数のプロジェクトを並行して開発する際の利便性を向上させます。
next-browser
by @vercel-labs
next-browserツールのインストールと更新を自動化し、Playwrightと連携してNext.jsアプリケーションのブラウザテスト環境を構築します。
react-native
by @vercel-labs
JSON仕様をReact Nativeコンポーネントツリーに変換し、データバインディング、動的プロパティ、可視性制御、インタラクティブイベントをサポートします。
oauth
by @vercel-labs
Portless を使用したローカル開発時に、OAuthプロバイダー(Google、Appleなど)が`.localhost`ドメインの制限により発生するリダイレクトURIエラーを解決します。Portlessを有効なTLDで設定することで、OAuthログインをスムーズにし、「redirect_uri_mismatch」などの問題を回避します。
before-and-after
by @vercel-labs
ビフォーアフターのスクリーンショット処理に使用し、パッケージの使用法とプロキシの動作に関する具体的なガイダンスを提供します。AIエージェントスキル、作業効率と自動化能力を向上させます。
konsistent-config
by @vercel-labs
この Skill は、プロジェクトのファイル構成と TypeScript の import/export 規約を強制する konsistent.json を作成・管理します。既存コードベースの主流パターンから検証可能なルールを導き、違反を監査結果として出力するため、チームはディレクトリ構成やモジュール境界を継続的に守れます。
react-three-fiber
by @vercel-labs
React Three Fiberレンダラー。19個の組み込み3Dコンポーネントを提供し、サーバーサイドレンダリング用のスキーマ定義をサポートします。
native-sdk
by @vercel-labs
このスキルはネイティブデスクトップアプリ構築の完全なガイドを提供します。TypeScriptと宣言型Nativeマークアップでアプリを作成し、JSランタイムなしのネイティブバイナリにコンパイル。ZigコアとWebView埋め込みをサポートし、自動化サーバーを内蔵。スキャフォールディング、UI作成、ブリッジコマンド、パッケージング、自動テストまで一貫して行えるため、デスクトップ開発の敷居を大幅に下げます。
vgpu
by @vercel-labs
この Skill は、プロジェクトにローカルインストールされた vgpu CLI を通じて、固定されたバージョンに対応する同梱ドキュメントだけを参照させ、記憶やデフォルトブランチ、ホスト型サイトから API を推測することを防ぎます。依存関係のアップグレードや移行ガイドの確認、バージョン不一致による幻覚的な API 記述を避けたい場面で役立ち、コード変更の前に正しいガイドと API ページを読むことを保証します。
opensrc
by @vercel-labs
このスキルは opensrc コマンドを使い、npm/PyPI/crates.io パッケージや GitHub リポジトリのソースコードを即座に取得・キャッシュし、AIエージェントが型やドキュメントだけでなく実装の詳細を直接読めるようにします。ライブラリの予期しない動作のデバッグ、エッジケースの検証、有名プロジェクトの設計パターン学習などに最適で、調査時間を大幅に短縮します。
deployments-cicd
by @vercel-labs
このSkillは、VercelのデプロイとCI/CDワークフローに関する専門ガイダンスを提供します。プレビューデプロイ、本番デプロイ、ローカルビルド、即時ロールバック、そしてGitHub Actions、GitLab CI、Bitbucket Pipelinesとの統合をカバーします。チームはワンクリックで自動デプロイとロールバックを実現し、リリース速度と信頼性を向上させます。
ink
by @vercel-labs
JSON仕様をインタラクティブなターミナルコンポーネントに変換し、コマンドラインインターフェースを構築するためのレンダラー。
vercel-functions
by @vercel-labs
Vercel Functions に関する専門家ガイダンスを提供し、Serverless Functions、Edge Functions、Fluid Compute、ストリーミング、Cron Jobs、ランタイム構成をカバーします。Vercel 上で動作するサーバーサイドコードの設定、デバッグ、最適化に使用し、開発者がコンピュートリソースを効率的に管理し、パフォーマンスを向上させるのに役立ちます。
ai-gateway
by @vercel-labs
このスキルはVercel AI Gatewayのエキスパートガイダンスを提供し、モデルルーティング、プロバイダフェイルオーバー、コスト追跡、統一APIによる複数AIプロバイダ管理を構成します。マルチモデル呼び出しを簡素化し、高可用性と可観測性を確保し、開発の複雑さを軽減します。
vercel-agent
by @vercel-labs
Vercel Agent は AI 駆動のコードレビューとインシデント調査ツールで、PR のセキュリティ脆弱性やパフォーマンス問題を自動分析し、根本原因を特定し、SDK インストールを支援することで、開発効率とコード品質を向上させます。
env-vars
by @vercel-labs
このスキルはVercelプロジェクトの環境変数管理(.envファイル階層、vercel env CLIコマンド、OIDCトークンライフサイクルなど)について専門的なガイダンスを提供します。新規プロジェクトの初期化、ローカル開発環境のセットアップ、本番デプロイの環境設定に役立ち、機密情報の漏洩を防ぎ、環境の一貫性を確保します。
turbopack
by @vercel-labs
このスキルは、Vercel が開発した Rust ベースの JavaScript/TypeScript バンドラー「Turbopack」の専門的なガイダンスを提供します。Next.js 16 のバンドラー設定、HMR(ホットモジュールリプレースメント)の最適化、ビルド問題のデバッグ、Turbopack と Webpack の違いの理解を支援します。CSS、CSS Modules、Sass、ツリーシェイキング、バンドル解析、ローダーの移行などをカバーし、大規模プロジェクトのビルドパフォーマンス向上に役立ちます。
routing-middleware
by @vercel-labs
このSkillはVercelプラットフォームでキャッシュ前にリクエストをインターセプトし、リライト、リダイレクト、A/Bテスト、地理位置情報ルーティングなどをサポートします。開発者はmiddleware.tsを作成して、あらゆるフレームワークでカスタムリクエストロジックを実装できます。
vercel-storage
by @vercel-labs
このスキルは、Vercel Blob、Edge Config、Neon Postgresなどのマーケットプレイスストレージを含むVercelストレージオプションに関する専門家のガイダンスを提供します。ユーザーが適切なストレージソリューションを選択、構成、使用し、アプリケーションのパフォーマンスと開発効率を向上させるのに役立ちます。
auth
by @vercel-labs
この Skill は Vercel アプリケーション向けに Clerk、Descope、Auth0 などの認証統合ガイダンスを提供し、SDK のインストール、ミドルウェア設定、ルート保護、ユーザーデータアクセスをカバー、開発者が簡単にユーザー認証フローを実装できるようにし、手動によるドキュメント調査や設定ミスを回避します。
verification
by @vercel-labs
このSkillは、ユーザーが構築中のフルスタック機能を推測し、ブラウザ、API、データ、レスポンスの各層をエンドツーエンドで検証します。開発サーバーの起動時や問題が発生した際に作動し、断線した境界を素早く特定し、手動デバッグ時間を削減します。
marketplace
by @vercel-labs
このスキルは、Vercel プラットフォーム上のサードパーティ統合を素早く発見、インストール、管理するのに役立ちます。分類、発見、インストールの標準化された流れにより、ドキュメントや SDK を手動で検索することなく、コマース、決済、監視などのサービスを統合でき、調査と設定の時間を大幅に削減します。
bootstrap
by @vercel-labs
このスキルは、Vercel リンクされたプロジェクトのブートストラッププロセスを自動的にオーケストレーションし、プロジェクトリンク、環境変数設定、データベースリソースのデプロイなどを正しい順序で実行します。順序ミスによる障害を防ぎ、プロジェクトの初期化や修復を効率化します。Vercel 依存のリポジトリを扱うチームに最適です。
runtime-cache
by @vercel-labs
このスキルは、Vercel Runtime Cache API の使用方法を説明します。関数、ミドルウェア、ビルド間で共有される一時的な地域別キー値キャッシュを提供し、タグベースの無効化をサポートします。フレームワークレベルのキャッシュを超えた戦略に適しており、レイテンシを低減しデータ一貫性を向上させます。
create-remotion-geist
by @vercel-labs
Geistデザインシステムの美的原則を適用して、高品質なRemotionビデオを作成します。このスキルは、デザインの美学をビデオ制作プロセスに統合することに焦点を当てています。
json-render-react
by @vercel-labs
JSON仕様データをインタラクティブなReactコンポーネントツリーに変換し、動的なUIレンダリングを実現するReactレンダラー。
json-render-core
by @vercel-labs
スキーマ定義、ディレクトリ作成、正規ストリーム処理を含むJSONレンダリングのコア機能を提供し、動的なコンテンツとコンポーネントの構築に使用します。