react-grab

react-grab — AI エージェント向けブラウザー要素コンテキスト

キーワード： react-grab · grab · element context

実行中の React UI 要素を指定し、コンポーネント、ファイル、HTML の正確なコンテキストを取得して、 Claude Code、Cursor、Copilot、Codex、Gemini、または MCP ワークフローに直接渡します。

このスキルを使う場面

• React プロジェクトに react-grab をインストールし、エージェントがブラウザーから正確なコンポーネントコンテキストをコピーできるようにする
• React 要素の取得に、クリップボードフロー、MCP フロー、プラグイン／API フローのどれを使うか選ぶ
• 読み込み位置の誤り、ファイルパスの欠落、MCP の空の応答など、react-grab のセットアップに関する問題を解決する
• エージェント連携（claude-code、cursor、codex、gemini、mcp など）を追加または削除する
• カスタムプラグインを構築する、またはプリミティブ API を使ってプロジェクト固有のワークフローを実現する

次の用途にはこのスキルを使わないでください：

• 新しいセッションでのブラウザー自動化、認証フロー、一時的なブラウザー検証 → browser-harness
• 既存の Cookie／拡張機能／ログイン情報を使った、実行中のブラウザーの再利用 → playwriter
• レンダリングされた UI に対する、人間によるフィードバック／注釈パケット → agentation
• React のパフォーマンス診断、再レンダリングの頻発、ハイドレーション、バンドル、RSC／クライアント境界の作業 → react-best-practices
• 一般的な UI システム／トークン／コンポーネントライブラリの設計作業 → design-system

手順

ステップ 1：リクエストを分類する

コマンドを提示する前に、主なモードを 1 つ選んでください。

1. クリップボードへのインストール／使用 — ユーザーが要素にカーソルを合わせ、Cmd/Ctrl+C を押して、コンテキストを AI エージェントに貼り付けたい場合。
2. MCP ワークフロー — ユーザーがブラウザーで要素を選択した後、get_element_context のようなツールをエージェントから呼び出したい場合。
3. プラグイン／API ワークフロー — ユーザーがカスタムアクション、ライフサイクルフック、書式設定、または freeze() のようなプリミティブを使いたい場合。
4. トラブルシューティング／削除 — ユーザーがセットアップの問題を解決したい、または連携をきれいに削除したい場合。

ステップ 2：前提条件を正確に確認する

上流プロジェクトを信頼できる情報源として参照してください。

• 既定のインストール方法は npx grab@latest init です。
• 上流の package.json では現在、Node.js >=22 が必要です。
• ブラウザーオーバーレイは開発専用のツールです。本番環境の機能として説明しないでください。

ユーザーの環境が Node 22 より古い場合は、インストール方法を提示する前にそのことを明示してください。

ステップ 3：正しく最短の手順を提示する

モード A — クリップボードへのインストール／使用

ユーザーが MCP やプラグインを明示的に求めていない限り、既定の手順として次を使ってください。

# At the project root
npx -y grab@latest init

続けて、実行時の流れを説明してください。

1. 開発サーバーを起動します。
2. ブラウザーでアプリを開きます。
3. 対象の要素にカーソルを合わせます。
4. Cmd+C（Mac）または Ctrl+C（Windows/Linux）を押します。
5. 取得したコンテキストを AI エージェントに貼り付けます。

クリップボードの出力には次の情報を含めてください。

• コンポーネント名
• ソースファイルのパス
• 取得できる場合は行／列
• HTML スニペット

フレームワーク固有のセットアップが必要な場合は、references/install-and-routing.md を使ってください。

モード B — MCP ワークフロー

ユーザーが手動で貼り付ける代わりに、エージェントからプログラムでアクセスしたい場合：

npx -y grab@latest add mcp

実際の流れを明確に説明してください。

1. ユーザーがブラウザーオーバーレイで要素を選択するか、カーソルを合わせます。
2. MCP サーバーが最新の選択内容を公開します。
3. AI エージェントが get_element_context を呼び出します。
4. ツールがファイルパス、コンポーネント、スタック、HTML コンテキストを返します。

クリップボードフローとの違いを尋ねられた場合：

• クリップボードは、チャットへの手動貼り付けです。
• MCPは、選択後にツール経由で取得する方法です。

エージェントごとのインストール方法とルーティングの案内には、references/agent-workflows.md を使ってください。

モード C — プラグイン／API ワークフロー

ユーザーがカスタム動作、自動化、またはより深い連携を求めている場合：

• まず、インストール方法とワークフローを選びます。
• 次に、以下を案内します。
  • API の全容については references/api.md
  • 実用的なプラグイン／MCP のパターンについては references/agent-workflows.md

よく使われるプリミティブ：

• getElementContext(element)
• freeze() / unfreeze()
• openFile(filePath, lineNumber?)
• registerPlugin(...)

ユーザーが詳細な説明を求めていない限り、API 全体を提示しないでください。

モード D — トラブルシューティング／削除

ユーザーが修正や削除を希望している場合：

• 症状から原因を特定するには、references/troubleshooting.md を使用します。
• 削除には、上流の CLI 削除コマンドを使用します：

npx -y grab@latest remove <agent>

ステップ 4：境界を明確に保つ

react-grab は、ブラウザーから React 要素のコンテキストを取得することに特化させます。

ユーザーが実際に以下を求めている場合は、適切なツールに案内します：

• 一般的なブラウザー自動化 → browser-harness または playwriter
• UI のレビュー／視覚的な注釈 → agentation
• パフォーマンス／プロファイリング／ハイドレーション／バンドル／RSC の問題 → react-best-practices
• 再利用可能なコンポーネントシステムの設計 → design-system または design-system

ステップ 5：最初の案内を肥大化させず、リファレンスドキュメントを優先する

モードを分類した後は、該当するサポートドキュメントのみを読み込みます：

• references/install-and-routing.md
• references/agent-workflows.md
• references/troubleshooting.md
• references/api.md

ユーザーが詳細な手順を明示的に求めていない限り、回答は簡潔にします。

例

例 1：Next.js アプリへのインストールとクリップボードの使用

ユーザー：「Next.js アプリに react-grab をセットアップして、コンポーネントを Claude Code にコピーできるようにしてください。」

回答の構成：

1. Node 22 以降が必要であることを確認します。
2. 既定の方法として npx -y grab@latest init を使用します。
3. 開発サーバー → ブラウザーでホバー → Cmd/Ctrl+C → Claude Code に貼り付ける手順を説明します。
4. 自動検出が使えない場合に限り、フレームワーク固有のセットアップを読み込みます。

例 2：エージェントのツールアクセス用 MCP セットアップ

ユーザー：「エージェントが選択したボタンのコンテキストを取得できるように、react-grab MCP をインストールしてください。」

回答の構成：

1. Node 22 以降が必要であることを確認します。
2. npx -y grab@latest add mcp を実行します。
3. まずブラウザーで要素を選択し、その後エージェントが get_element_context を呼び出すことを説明します。
4. 必要に応じて、一般的なブラウザー操作に関する質問は browser-harness／playwriter に案内します。

例 3：カスタムプラグインのワークフロー

ユーザー：「コンテキストメニューに Jira アクションを追加する react-grab プラグインを作成してください。」

回答の構成：

1. react-grab をプラグイン／API の用途に限定します。
2. アクションと、必要に応じてフックを指定して registerPlugin(...) を使用します。
3. フックの全容については references/api.md を参照するよう案内します。
4. API 全体を再掲せず、求められたアクションに絞って例を示します。

例 4：セットアップの不整合を修正する

ユーザー：「手元の環境で grab init が何度も失敗します。」

回答の構成：

1. 最初に Node のバージョンを確認し、Node 22 以降が必要であることを伝えます。
2. プロジェクトのルートディレクトリから実行していることを確認します。
3. オーバーレイ／読み込み／MCP／パスの問題には references/troubleshooting.md を使用します。
4. 関連のないフレームワークのビルド問題は、適切なフロントエンドスキルに案内します。

ベストプラクティス

1. インストールコマンドを推奨する前に、Node.js >=22 の必須要件を正確に伝えます。
2. ユーザーが手動でのフレームワークセットアップを明示的に必要としている場合を除き、既定では npx -y grab@latest init を使用します。
3. 開発環境専用にします。本番ビルドに含めるものだと示唆してはいけません。
4. クリップボードと MCP の違いを明確に説明し、貼り付けベースのワークフローとツールベースのワークフローを混同させないようにします。
5. 範囲の広いブラウザー操作や UI レビューの作業は早めに適切なツールへ案内し、react-grab に隣接するスキルまで担わせないようにします。
6. 長いインストール手順や API マニュアルをメインの回答に貼り付ける代わりに、詳細についてはサポートドキュメントを使用します。

参考資料

• react-grab GitHub
• react-grab.com
• インストールとルーティングのガイド
• エージェントのワークフロー
• トラブルシューティング
• API リファレンス全文
• ヘルパースクリプト — install.sh と add-agent.sh