react-expert

Use when researching React APIs or concepts for documentation. Use when you need authoritative usage examples, caveats, warnings, or errors for a React feature.

By reactjs · 1,242 installs

npx skills add reactjs/react.dev --skill react-expert

Source repository · Upstream listing

React Expert Research Skill Overview 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: "I know this API does X" → Find source evidence first "Common pattern is Y" → Verify in test files Generating example code → Must have source file reference </CRITICAL Invocation Sources (Priority Order) 1. React Repo Tests Most authoritative for actual behavior 2. React Source Code Warnings, errors, implementation details 3. Git History Commit messages with context 4. GitHub PRs & Comments Design rationale (via gh CLI) 5. GitHub Issues Confusion/questions (react/react + reactjs/react.dev) 6. React Working Group Design discussions for newer APIs 7. Flow Types Source of truth for type signatures 8. TypeScript Types Note discrepancies with Flow 9. Current react.dev docs Baseline (not trusted as complete) No web search No Stack Overflow, blog posts, or web searches. GitHub API via gh CLI is allowed. Workflow Step 1: Setup React Repo First, ensure the React repo is available locally: Get the current commit hash for the research document: Step 2: Dispatch 6 Parallel Research Agents 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 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. Step 3: Agent Prompts Use these exact prompts when spawning agents: test explorer javascript <exact code from test source explorer git historian pr researcher issue hunter types inspector flow <exact type definition typescript <exact type definition 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 Common Mistakes to Avoid 1. Trusting prior knowledge If you "know" something about the API, find the source evidence anyway 2. Generating example code Every code example must come from an actual source file 3. Skipping agents All 6 agents must run; each provides unique perspective 4. Summarizing without sources Every claim needs a file:line or PR/issue reference 5. Using web search No Stack Overflow, no blog posts, no social media Verification Checklist Before finalizing the research document: [ ] React repo is at .claude/react with known commit hash [ ] All 6 agents were spawned in parallel [ ] Every code example has a source file reference [ ] Warnings/errors table has source locations [ ] No claims made without source evidence [ ] Discrepancies between Flow/TS types documented [ ] Source links section is complete