Vercel Labs

認証で保護されたVercelの公開先に、既存の利用者情報と短期トークンで接続するスキル。保護を維持したブラウザテストや、接続失敗の原因切り分けを支援します。

• 保護されたPreviewをテストしたいとき
• ログイン画面への転送原因を調べたいとき
• Production接続の設定を整理したいとき

AWS上のクラウドブラウザでページ操作や画面取得を自動化するスキル。agent-browserの通常コマンドを使い、ログイン状態の保存や実行中の画面確認にも対応します。

• AWS上でブラウザ操作を実行したいとき
• ログイン状態を次回へ引き継ぎたいとき
• クラウドブラウザの実行画面を確認

Vercel上のアプリから、分離された一時的な仮想環境でChromeを動かし、画面撮影やフォーム入力、状態を保つ複数段階のブラウザ操作を実装します。

• Vercelアプリに画面撮影を組み込む
• 複数コマンドでフォームを入力・送信
• Vercel Cron Jobsで定期実行

既存サイトの操作を、AIエージェントが呼び出せる実験的なWebMCPツールにまとめ、画面上の動作との一致や異常時の処理を検証するスキル。

• 既存サイトの操作をツール化したいとき
• ツール実行後の画面変化の検証
• 不正入力やキャンセル時の動作確認

ページ内の操作対象を読み取り、クリックや入力、情報抽出、画面撮影を進める基本手順を案内し、ログイン状態の保存や複数セッションの管理も扱います。

• フォーム入力と結果画面の確認
• ページの表やリンク先の抽出
• ページ全体や注釈付きの画面撮影

サイト操作時の通信を記録・分析し、内部APIを直接呼び出すスクリプトやCLIを作るスキル。検索や詳細取得などの反復作業を、初回記録後はブラウザなしで実行できます。

• Webサイト専用のCLIを作りたいとき
• 反復する検索をAPI呼び出しにしたいとき
• 通信記録から要求と応答の構造を調査

Webサイトの閲覧、入力、データ抽出、画面撮影をAIエージェントに任せるために、ブラウザ操作CLIの導入と用途別ガイドの参照方法を案内します。

• サイトの入力やページ移動の自動化
• ページのデータ抽出と画面撮影
• Webアプリの不具合探し

Webアプリを利用者の目線で操作し、不具合や使いにくさを探すスキル。再現手順とスクリーンショット、必要に応じた動画を添え、担当者に渡せる報告書を作成します。

• 公開前にWebアプリの品質を確認したいとき
• フォームや一連の操作を検証したいとき
• 使いにくい画面や表示の問題を探したいとき

Electron製のデスクトップアプリに接続し、クリックや入力、画面撮影を自動化するスキル。複数のウィンドウを切り替えながら、情報抽出や動作確認を進められます。

• デスクトップアプリの入力を自動化したいとき
• アプリのテキストや画面情報の抽出
• 動作確認用の画面を撮影したいとき

Slackの未読確認や会話検索、メッセージ送信をブラウザ操作で進めるスキル。チャンネル情報や発言を抽出し、確認した画面を画像として保存できます。

• 未読チャンネルとDMを確認したいとき
• 過去の会話や発言者を探したいとき
• チャンネル情報や発言を抽出したいとき

skills CLIの変更依頼を説明文とコード差分から読み取り、既存ラベルを尊重しながら、文書変更・不具合修正・機能拡張のいずれかに分類するスキル。

• 文書や使用例だけの変更を分類したいとき
• 既存CLI動作の不具合修正を分類
• 新コマンドや対応エージェント追加の分類

skills CLIの修正PRを差分と回帰テストの根拠から選別し、担当者へ引き継ぎます。不具合の実在、修正の仕組み、影響範囲を確認するスキルです。

• 根拠のある不具合修正PRの選別
• 回帰テストと他エージェントへの影響確認
• ボード情報から関連課題の候補を整理

やりたい作業に合うエージェント向けスキルを探し、配布元や導入実績を確認したうえで、候補の用途・詳細リンク・導入コマンドを案内し、インストールを支援するスキル。

• 作業や分野に合うスキルを探したいとき
• 導入前に配布元や利用実績を比較
• 候補の導入コマンドやリンクを知りたいとき

Web画面のコードを最新のWeb Interface Guidelinesと照合し、改善すべき箇所を確認します。指摘はファイル名と行番号付きで示します。

• Web画面のコードを見直したいとき
• 基準に沿ってアクセシビリティを確認
• デザインや使い勝手のレビュー

アプリやWebサイトをVercelへデプロイし、共有用URLを案内します。Git連携や認証状況に応じた手順で、プレビュー公開から本番公開まで扱います。

• アプリのプレビューURLを共有したいとき
• Webサイトを本番公開したいとき
• Gitプッシュによる自動公開の設定

Reactの画面遷移やリストの並べ替え、要素の表示・非表示に、ブラウザ標準機能を使ったアニメーションを実装。Next.jsとの連携も扱うスキル。

• 一覧と詳細の画像をつなぐ演出
• 進む・戻る方向に応じた画面遷移
• リスト並べ替えや表示切り替えの演出

React Native・Expoのモバイルアプリ開発で、リスト表示やアニメーション、画像、画面遷移を見直し、性能と実装方法の改善を支援するスキル。

• 長いリストとスクロールの性能改善
• Reanimatedとジェスチャーの見直し
• 画像・画面遷移・モーダルの実装検討

アクセストークンを使い、Vercelへのデプロイや環境変数、ドメインの管理を進めるスキル。対象プロジェクトとチームの確認から、公開後の状態やログの確認まで扱います。

• トークンでプレビューを公開したいとき
• 環境変数を追加・取得したいとき
• デプロイ状況やビルドログの確認

公開済みのVercelプロジェクトを、実測データから費用と性能の両面で点検するスキル。利用量や遅い処理を調べ、確認済みのコードと資料を根拠に改善案を優先順位付きでまとめます。

• Vercelの利用量と費用要因の調査
• 実測で遅いルートを調べたいとき
• アクセス状況に基づくキャッシュ検討

Reactの部品を組み合わせ、再利用しやすい構造に整理するスキル。真偽値の設定項目が増えたコンポーネントの見直しや、状態管理、柔軟な部品ライブラリの設計に使えます。

• 真偽値のpropsが増えた部品の整理
• 再利用できる部品ライブラリの設計
• 状態共有とProvider構成の見直し

ReactとNext.jsのコードを、性能への影響が大きい順に見直すスキル。データ取得の待ち時間や配信コードの容量、不要な再描画などを点検し、実装や改善の判断に使えます。

• ReactとNext.jsの性能レビュー
• 順番待ちの多いデータ取得の改善
• 配信コードの容量と読み込み時間の削減

ドキュメントや文章を最新のWriting Guidelinesに照らして点検します。指定ファイルの文体やトーンなどを確認し、指摘をファイル名と行番号付きで示します。

• 共有前にドキュメントを点検したいとき
• 複数ファイルの文体チェック
• ページの語り口やトーンの確認

JSONで定義したメールをHTMLやプレーンテキストへ変換する実装を支援します。登録通知や販促メールの部品定義、条件別の内容表示、プレビューまで扱います。

• 登録完了などの通知メールの作成
• JSON仕様から販促メールを作りたいとき
• 状態や条件でメール内容を変えたいとき

JSONの画面仕様をVue 3の部品に変換し、入力値の同期や条件付き表示、ボタン操作を実装するスキル。AIが生成した画面の表示や、既存の状態管理との連携も扱います。

• AI生成のJSON画面をVue 3で表示
• 入力値の同期と検証を備えたフォーム作り
• 状態に応じた表示の切り替え