react-expert by reactjs/react.dev
npx skills add https://github.com/reactjs/react.dev --skill react-expert此技能通过搜索权威来源(测试、源代码、PR、问题)而非依赖 LLM 训练知识,对任何 React API 或概念生成详尽的文档研究。
危险信号 - 如果你发现自己有这些想法,请立即停止:
/react-expert useTransition
/react-expert suspense boundaries
/react-expert startTransition
gh CLI)不使用网络搜索 - 不使用 Stack Overflow、博客文章或网络搜索。允许通过 CLI 使用 GitHub API。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
gh首先,确保本地有 React 仓库可用:
# 检查 React 仓库是否存在,克隆或更新
if [ -d ".claude/react" ]; then
cd .claude/react && git pull origin main
else
git clone --depth=100 https://github.com/facebook/react.git .claude/react
fi
获取研究文档的当前提交哈希:
cd .claude/react && git rev-parse --short HEAD
使用任务工具并行生成这些代理。每个代理都收到怀疑论前言:
"你正在研究 React 的
<TOPIC>。关键:不要依赖你关于此 API 的先前知识。你的训练可能包含过时或不正确的模式。只报告你在源文件中找到的内容。如果你的发现与普遍理解相矛盾,请明确突出这种差异。"
| 代理 | 子代理类型 | 关注点 | 说明 |
|---|---|---|---|
| test-explorer | 探索 | 测试文件中的使用模式 | 搜索 .claude/react/packages/*/src/__tests__/ 中提及该主题的测试文件。提取实际使用示例,包含文件路径和行号。 |
| source-explorer | 探索 | 源代码中的警告/错误 | 搜索 .claude/react/packages/*/src/ 中提及该主题的 console.error、console.warn 和错误消息。记录触发条件。 |
| git-historian | 探索 | 提交信息 | 在 .claude/react 中运行 git log --all --grep="<topic>" --oneline -50。阅读完整的提交信息以获取上下文。 |
| pr-researcher | 探索 | 引入/修改 API 的 PR | 运行 gh pr list -R facebook/react --search "<topic>" --state all --limit 20。阅读关键的 PR 描述和评论。 |
| issue-hunter | 探索 | 显示困惑的问题 | 在 facebook/react 和 reactjs/react.dev 仓库中搜索问题。寻找常见问题和误解。 |
| types-inspector | 探索 | Flow + TypeScript 签名 | 在 .claude/react/packages/*/src/*.js 中查找 Flow 类型(寻找 @flow 注释)。在 .claude/react/packages/*/index.d.ts 中查找 TS 类型。注意差异。 |
生成代理时使用以下确切的提示词:
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
You are researching React's .
CRITICAL: Do NOT rely on your prior knowledge about this API. Only report what you find in the source files.
Your task: Find warnings, errors, and implementation details for .
Format your output as:
| Message | Trigger Condition | Source |
|---|---|---|
| "" | file:line |
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in git history.
Your task: Find commit messages that explain <TOPIC> design decisions.
1. Run: cd .claude/react && git log --all --grep="<topic>" --oneline -50
2. For significant commits, read full message: git show <hash> --stat
3. Look for:
- Initial introduction of the API
- Bug fixes (reveal edge cases)
- Behavior changes
- Deprecation notices
Format your output as:
## Key Commits
### <short hash> - <subject>
**Date:** <date>
**Context:** <why this change was made>
**Impact:** <what behavior changed>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs.
Your task: Find PRs that introduced or modified <TOPIC>.
1. Run: gh pr list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. For promising PRs, read details: gh pr view <number> -R facebook/react
3. Look for:
- The original RFC/motivation
- Design discussions in comments
- Alternative approaches considered
- Breaking changes
Format your output as:
## Key PRs
### PR #<number>: <title>
**URL:** <url>
**Summary:** <what it introduced/changed>
**Design Rationale:** <why this approach>
**Discussion Highlights:** <key points from comments>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issues.
Your task: Find issues that reveal common confusion about <TOPIC>.
1. Search facebook/react: gh issue list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "<topic>" --state all --limit 20 --json number,title,url
3. For each issue, identify:
- What the user was confused about
- What the resolution was
- Any gotchas revealed
Format your output as:
## Common Confusion
### Issue #<number>: <title>
**Repo:** <facebook/react or reactjs/react.dev>
**Confusion:** <what they misunderstood>
**Resolution:** <correct understanding>
**Gotcha:** <if applicable>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in type definitions.
Your task: Find and compare Flow and TypeScript type signatures for <TOPIC>.
1. Flow types (source of truth): Search .claude/react/packages/*/src/*.js for @flow annotations related to <topic>
2. TypeScript types: Search .claude/react/packages/*/index.d.ts and @types/react
3. Compare and note any discrepancies
Format your output as:
## Flow Types (Source of Truth)
**File:** <path>
```flow
<exact type definition>
File:
<exact type definition>
所有代理完成后,将他们的发现合并到一份研究文档中。
不要添加你自己的知识信息。 只包含代理在来源中找到的内容。
将最终文档写入 .claude/research/<topic>.md
将主题中的空格替换为连字符(例如,"suspense boundaries" → "suspense-boundaries.md")
# 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>
在最终确定研究文档之前:
.claude/react 且具有已知的提交哈希每周安装次数
700
仓库
GitHub Stars
11.7K
首次出现
Feb 1, 2026
安全审计
安装于
github-copilot674
codex668
opencode666
gemini-cli663
kimi-cli660
amp659
This skill produces exhaustive documentation research on any React API or concept by searching authoritative sources (tests, source code, PRs, issues) rather than relying on LLM training knowledge.
Red Flags - STOP if you catch yourself thinking:
/react-expert useTransition
/react-expert suspense boundaries
/react-expert startTransition
gh CLI)No web search - No Stack Overflow, blog posts, or web searches. GitHub API via gh CLI is allowed.
First, ensure the React repo is available locally:
# 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/facebook/react.git .claude/react
fi
Get the current commit hash for the research document:
cd .claude/react && git rev-parse --short HEAD
Spawn these agents IN PARALLEL using the Task tool. Each agent receives the skepticism preamble:
"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. If your findings contradict common understanding, explicitly highlight this discrepancy."
| Agent | subagent_type | Focus | Instructions |
|---|---|---|---|
| test-explorer | Explore | Test files for usage patterns | Search .claude/react/packages/*/src/__tests__/ for test files mentioning the topic. Extract actual usage examples WITH file paths and line numbers. |
| source-explorer | Explore | Warnings/errors in source | Search .claude/react/packages/*/src/ for console.error, console.warn, and error messages mentioning the topic. Document trigger conditions. |
| git-historian | Explore | Commit messages | Run git log --all --grep="<topic>" --oneline -50 in .claude/react. Read full commit messages for context. |
Use these exact prompts when spawning agents:
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>
Behavior:
#### source-explorer
You are researching React's .
CRITICAL: Do NOT rely on your prior knowledge about this API. Only report what you find in the source files.
Your task: Find warnings, errors, and implementation details for .
Format your output as:
| Message | Trigger Condition | Source |
|---|---|---|
| "" | file:line |
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in git history.
Your task: Find commit messages that explain <TOPIC> design decisions.
1. Run: cd .claude/react && git log --all --grep="<topic>" --oneline -50
2. For significant commits, read full message: git show <hash> --stat
3. Look for:
- Initial introduction of the API
- Bug fixes (reveal edge cases)
- Behavior changes
- Deprecation notices
Format your output as:
## Key Commits
### <short hash> - <subject>
**Date:** <date>
**Context:** <why this change was made>
**Impact:** <what behavior changed>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in PRs.
Your task: Find PRs that introduced or modified <TOPIC>.
1. Run: gh pr list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. For promising PRs, read details: gh pr view <number> -R facebook/react
3. Look for:
- The original RFC/motivation
- Design discussions in comments
- Alternative approaches considered
- Breaking changes
Format your output as:
## Key PRs
### PR #<number>: <title>
**URL:** <url>
**Summary:** <what it introduced/changed>
**Design Rationale:** <why this approach>
**Discussion Highlights:** <key points from comments>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in issues.
Your task: Find issues that reveal common confusion about <TOPIC>.
1. Search facebook/react: gh issue list -R facebook/react --search "<topic>" --state all --limit 20 --json number,title,url
2. Search reactjs/react.dev: gh issue list -R reactjs/react.dev --search "<topic>" --state all --limit 20 --json number,title,url
3. For each issue, identify:
- What the user was confused about
- What the resolution was
- Any gotchas revealed
Format your output as:
## Common Confusion
### Issue #<number>: <title>
**Repo:** <facebook/react or reactjs/react.dev>
**Confusion:** <what they misunderstood>
**Resolution:** <correct understanding>
**Gotcha:** <if applicable>
You are researching React's <TOPIC>.
CRITICAL: Do NOT rely on your prior knowledge. Only report what you find in type definitions.
Your task: Find and compare Flow and TypeScript type signatures for <TOPIC>.
1. Flow types (source of truth): Search .claude/react/packages/*/src/*.js for @flow annotations related to <topic>
2. TypeScript types: Search .claude/react/packages/*/index.d.ts and @types/react
3. Compare and note any discrepancies
Format your output as:
## Flow Types (Source of Truth)
**File:** <path>
```flow
<exact type definition>
File:
<exact type definition>
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.
Write the final document to .claude/research/<topic>.md
Replace spaces in topic with hyphens (e.g., "suspense boundaries" → "suspense-boundaries.md")
# 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>
Before finalizing the research document:
.claude/react with known commit hashWeekly Installs
700
Repository
GitHub Stars
11.7K
First Seen
Feb 1, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot674
codex668
opencode666
gemini-cli663
kimi-cli660
amp659
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
136,300 周安装
| pr-researcher | Explore | PRs introducing/modifying API | Run gh pr list -R facebook/react --search "<topic>" --state all --limit 20. Read key PR descriptions and comments. |
| issue-hunter | Explore | Issues showing confusion | Search issues in both facebook/react and reactjs/react.dev repos. Look for common questions and misunderstandings. |
| types-inspector | Explore | Flow + TypeScript signatures | Find Flow types in .claude/react/packages/*/src/*.js (look for @flow annotations). Find TS types in .claude/react/packages/*/index.d.ts. Note discrepancies. |