react-expert

React エキスパート調査スキル

概要

このスキルでは、LLM の学習知識に頼るのではなく、信頼できる情報源（テスト、ソースコード、PR、Issue）を検索して、あらゆる React API や概念について徹底的に調査し、ドキュメントを作成します。

**懐疑的であることの義務:** 自身の知識を疑ってください。Claude は、古くなったり誤っていたりする React のパターンを学習していることがよくあります。ソース資料だけを信頼できる根拠として扱ってください。調査結果が事前の理解と矛盾する場合は、その食い違いを明示してください。

危険信号 — 次のように考えていることに気づいたら、作業を止めてください:

• 「この API が X をするのは知っている」→ まずソースで根拠を確認する
• 「一般的なパターンは Y」→ テストファイルで検証する
• サンプルコードを生成する → ソースファイルへの参照が必須

呼び出し

/react-expert useTransition
/react-expert suspense boundaries
/react-expert startTransition

情報源（優先順位順）

1. React リポジトリのテスト — 実際の動作に関する最も信頼できる情報源
2. React ソースコード — 警告、エラー、実装の詳細
3. Git 履歴 — 文脈を含むコミットメッセージ
4. GitHub PR とコメント — 設計上の根拠（gh CLI を使用）
5. GitHub Issue — 混乱や質問（react/react と reactjs/react.dev）
6. React ワーキンググループ — 新しい API に関する設計上の議論
7. Flow 型 — 型シグネチャの信頼できる情報源
8. TypeScript 型 — Flow との相違点に注意
9. 最新の react.dev ドキュメント — 基準（網羅性は保証されません）

Web 検索は禁止 — Stack Overflow、ブログ記事、Web 検索は使用しません。gh CLI を使った GitHub API の利用は許可されています。

ワークフロー

ステップ 1: React リポジトリをセットアップする

まず、React リポジトリをローカルで利用できる状態にします。

# Check if React repo exists, clone or update
if [ -d ".claude/react" ]; then
  cd .claude/react && git pull origin main
else
  git clone --depth=100 https://github.com/react/react.git .claude/react
fi

調査ドキュメント用に、現在のコミットハッシュを取得します。

cd .claude/react && git rev-parse --short HEAD

ステップ 2: 6 つの調査エージェントを並列で起動する

Task ツールを使って、次のエージェントを並列で起動します。各エージェントには、懐疑的に調査するよう促す前置き文を渡します。

「React の <TOPIC> を調査しています。重要: この API に関する事前知識に頼らないでください。学習内容には、古くなったり誤っていたりするパターンが含まれている可能性があります。ソースファイルで見つけた内容だけを報告してください。調査結果が一般的な理解と矛盾する場合は、その食い違いを明示してください。」

エージェント	subagent_type	調査対象	指示
test-explorer	Explore	使用パターンを示すテストファイル	.claude/react/packages/*/src/__tests__/ で、トピックに言及しているテストファイルを検索します。実際の使用例を、ファイルパスと行番号とともに抜き出します。
source-explorer	Explore	ソース内の警告とエラー	.claude/react/packages/*/src/ で、トピックに言及する console.error、console.warn、エラーメッセージを検索します。発生条件を記録します。
git-historian	Explore	コミットメッセージ	.claude/react で git log --all --grep="<topic>" --oneline -50 を実行します。文脈を把握するため、重要なコミットのメッセージ全文を読みます。
pr-researcher	Explore	API の導入・変更に関する PR	gh pr list -R react/react --search "<topic>" --state all --limit 20 を実行します。重要な PR の説明とコメントを読みます。
issue-hunter	Explore	混乱を示す Issue	react/react と reactjs/react.dev の両リポジトリで Issue を検索します。よくある質問や誤解を探します。
types-inspector	Explore	Flow と TypeScript のシグネチャ	.claude/react/packages/*/src/*.js で Flow 型を探します（@flow 注釈を確認してください）。.claude/react/packages/*/index.d.ts で TypeScript 型を探します。相違点を記録します。

ステップ 3: エージェントへのプロンプト

エージェントの起動時には、次の正確なプロンプトを使用します。

test-explorer

You are researching React's <TOPIC>.

CRITICAL: Do NOT rely on your prior knowledge about this API. Your training may contain outdated or incorrect patterns. Only report what you find in the source files.

Your task: Find test files in .claude/react that demonstrate <TOPIC> usage.

1. Search for test files: Glob for `**/__tests__/**/*<topic>*` and `**/__tests__/**/*.js` then grep for <topic>
2. For each relevant test file, extract:
   - The test description (describe/it blocks)
   - The actual usage code
   - Any assertions about behavior
   - Edge cases being tested
3. Report findings with exact file paths and line numbers

Format your output as:
## Test File: <path>
### Test: "<test description>"
```javascript
<exact code from test>

動作: <テストが検証する内容>

#### source-explorer

React の について調査しています。

重要：この API に関する事前知識に頼らないでください。ソースファイルで確認できる内容のみを報告してください。

タスク： に関する警告、エラー、実装の詳細を見つけてください。

1. 次の場所を検索します。.claude/react/packages/*/src/:
   • に言及している console.error
   • に言及している console.warn
   • に言及しているエラーメッセージ
   • 主な実装ファイル
2. 各警告／エラーについて、次の内容を記録します。
   • メッセージの正確な文言
   • 発生条件
   • ソースファイルと行番号

出力形式：

警告とエラー

メッセージ	発生条件	ソース
"<正確なメッセージ>"	<条件>	<ファイル:行番号>

実装に関するメモ

<ソースコードの主要な詳細>

#### git-historian

React の について調査しています。

重要：事前知識に頼らないでください。git の履歴で確認できる内容のみを報告してください。

タスク： の設計上の判断を説明するコミットメッセージを見つけてください。

1. 次を実行します。cd .claude/react && git log --all --grep="" --oneline -50
2. 重要なコミットについて、完全なメッセージを読みます。git show --stat
3. 次の点を確認します。
   • API の最初の導入
   • バグ修正（エッジケースが明らかになります）
   • 動作の変更
   • 非推奨化のお知らせ

出力形式：

主要なコミット

<短縮ハッシュ> - <件名>

日付： <日付> 背景： <変更が行われた理由> 影響： <変更された動作>

#### pr-researcher

React の について調査しています。

重要：事前知識に頼らないでください。PR で確認できる内容のみを報告してください。

タスク： を導入または変更した PR を見つけてください。

1. 次を実行します。gh pr list -R react/react --search "" --state all --limit 20 --json number,title,url
2. 有望な PR の詳細を読みます。gh pr view -R react/react
3. 次の点を確認します。
   • 元となる RFC／動機
   • コメントでの設計上の議論
   • 検討された代替案
   • 破壊的変更

出力形式：

主要な PR

PR #: <タイトル>

URL： 概要： <導入／変更された内容> 設計の根拠： <この方法が採用された理由> 議論の要点： <コメントでの主要な論点>

#### issue-hunter

React の について調査しています。

重要：事前知識に頼らないでください。issue で確認できる内容のみを報告してください。

タスク： に関するよくある混乱を明らかにする issue を見つけてください。

1. react/react を検索します。gh issue list -R react/react --search "" --state all --limit 20 --json number,title,url
2. reactjs/react.dev を検索します。gh issue list -R reactjs/react.dev --search "" --state all --limit 20 --json number,title,url
3. 各 issue について、次の点を特定します。
   • ユーザーが混乱していた点
   • どのように解決されたか
   • 明らかになった注意点

出力形式：

よくある混乱

Issue #: <タイトル>

リポジトリ： <react/react または reactjs/react.dev> 混乱： <誤解されていた内容> 解決： <正しい理解> 注意点： <該当する場合>

#### types-inspector

React の について調査しています。

重要：事前知識に頼らないでください。型定義で確認できる内容のみを報告してください。

タスク： の Flow と TypeScript の型シグネチャを見つけて比較してください。

1. Flow の型（信頼できる情報源）： に関連する @flow アノテーションを .claude/react/packages//src/.js で検索します。
2. TypeScript の型：.claude/react/packages/*/index.d.ts と @types/react を検索します。
3. 相違点を比較して記録します。

出力形式：

Flow の型（信頼できる情報源）

ファイル：

<exact type definition>

TypeScript の型

ファイル：

<exact type definition>

相違点

<Flow と TS の定義にある相違点>

### Step 4: Synthesize Results

After all agents complete, combine their findings into a single research document.

**DO NOT add information from your own knowledge.** Only include what agents found in sources.

### Step 5: Save Output

Write the final document to `.claude/research/<topic>.md`

Replace spaces in topic with hyphens (e.g., "suspense boundaries" → "suspense-boundaries.md")

## Output Document Template

```markdown
# React Research: <topic>

> Generated by /react-expert on YYYY-MM-DD
> Sources: React repo (commit <hash>), N PRs, M issues

## Summary

[Brief summary based SOLELY on source findings, not prior knowledge]

## API Signature

### Flow Types (Source of Truth)

[From types-inspector agent]

### TypeScript Types

[From types-inspector agent]

### Discrepancies

[Any differences between Flow and TS]

## Usage Examples

### From Tests

[From test-explorer agent - with file:line references]

### From PRs/Issues

[Real-world patterns from discussions]

## Caveats & Gotchas

[Each with source link]

- **<gotcha>** - Source: <link>

## Warnings & Errors

| Message | Trigger Condition | Source File |
|---------|------------------|-------------|
[From source-explorer agent]

## Common Confusion

[From issue-hunter agent]

## Design Decisions

[From git-historian and pr-researcher agents]

## Source Links

### Commits
- <hash>: <description>

### Pull Requests
- PR #<number>: <title> - <url>

### Issues
- Issue #<number>: <title> - <url>

避けるべきよくある間違い

1. 既存の知識を信頼する - API について「知っている」場合でも、必ずソースの根拠を見つけてください
2. サンプルコードを生成する - すべてのコード例は、実際のソースファイルから引用する必要があります
3. エージェントを省略する - 6 つのエージェントすべてを実行する必要があります。それぞれが独自の視点を提供します
4. ソースなしで要約する - すべての主張に、ファイルと行番号、または PR／issue の参照が必要です
5. ウェブ検索を使う - Stack Overflow、ブログ記事、ソーシャルメディアは使用しないでください

検証チェックリスト

調査ドキュメントを仕上げる前に、次の項目を確認してください。

• React リポジトリが .claude/react にあり、既知のコミットハッシュがある
• 6 つのエージェントすべてが並列で起動された
• すべてのコード例にソースファイルへの参照がある
• 警告／エラーの表にソースの場所が記載されている
• ソースの根拠がない主張がない
• Flow／TS 型の不一致が文書化されている
• ソースリンクのセクションに漏れがない