Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.
npxskills add reactjs/react.dev--skill react-expertLoading…
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.
<CRITICAL> **Skepticism Mandate:** You must be skeptical of your own knowledge. Claude is often trained on outdated or incorrect React patterns. Treat source material as the sole authority. If findings contradict your prior understanding, explicitly flag this discrepancy.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/react/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. |
| pr-researcher |
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: <what the test asserts>
#### source-explorer
You are researching React's <TOPIC>.
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 <TOPIC>.
Format your output as:
| Message | Trigger Condition | Source |
|---|---|---|
| "<exact message>" | <condition> | 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 react/react --search "<topic>" --state all --limit 20 --json number,title,url
2. For promising PRs, read details: gh pr view <number> -R react/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 react/react: gh issue list -R react/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:** <react/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: <path>
<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 hash| Explore |
| PRs introducing/modifying API |
Run gh pr list -R react/react --search "<topic>" --state all --limit 20. Read key PR descriptions and comments. |
| issue-hunter | Explore | Issues showing confusion | Search issues in both react/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. |
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).