SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场react-expert

react-expert

编程与开发

查看项目

更新于 10-15 10:23

技能介绍

用途

react-expert 是一个 React 研究技能，用于针对任意 React API 或概念生成详尽的文档研究。它通过检索权威来源（测试、源码、PR、Issue）来获取信息，而不是依赖 LLM 的训练知识。适用于需要权威用法示例、注意事项、警告或错误信息的场景。

主要能力

  • 从 React 仓库的测试文件中提取实际用法示例，附带文件路径和行号。
  • 从源码中查找 console.error、console.warn 和错误消息，记录触发条件。
  • 通过 git log 查找相关提交信息，了解设计决策和变更历史。
  • 通过 gh CLI 检索 GitHub PR，获取设计理由和讨论要点。
  • 检索 facebook/react 和 reactjs/react.dev 的 Issue，揭示常见困惑和误解。
  • 对比 Flow 类型（作为事实来源）与 TypeScript 类型签名，记录差异。

使用方式

调用格式：

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

工作流程：

  1. 设置 React 仓库：检查 .claude/react 是否存在，若存在则执行 git pull origin main，否则执行 git clone --depth=100 https://github.com/facebook/react.git .claude/react。然后获取当前提交哈希：cd .claude/react && git rev-parse --short HEAD。

  2. 并行派发 6 个研究代理（使用 Task 工具），每个代理接收怀疑性前言，强调不要依赖先验知识，只报告源文件中发现的内容。代理类型和焦点：

    • test-explorer（Explore）：在 .claude/react/packages/*/src/tests/ 中搜索测试文件，提取用法示例、断言和边界情况。
    • source-explorer（Explore）：在 .claude/react/packages/*/src/ 中搜索 console.error、console.warn 和错误消息，记录触发条件。
    • git-historian（Explore）：运行 git log --all --grep="<topic>" --oneline -50，阅读完整提交信息。
    • pr-researcher（Explore）：运行 gh pr list -R facebook/react --search "<topic>" --state all --limit 20，阅读关键 PR 描述和评论。
    • issue-hunter（Explore）：在 facebook/react 和 reactjs/react.dev 中搜索 Issue，寻找常见问题和误解。
    • types-inspector（Explore）：查找 Flow 类型（@flow 注解）和 TypeScript 类型（index.d.ts），对比差异。

  3. 每个代理有详细的提示词，要求输出格式包含文件路径、行号、精确代码、行为说明等。

  4. 综合结果：所有代理完成后，将发现合并为单一研究文档。不得添加来自自身知识的信息，只包含代理在来源中找到的内容。

  5. 保存输出：将最终文档写入 .claude/research/<topic>.md，主题中的空格替换为连字符（例如 "suspense boundaries" → "suspense-boundaries.md"）。

输出文档模板包含：摘要、API 签名（Flow 类型、TypeScript 类型、差异）、用法示例（来自测试、来自 PR/Issue）、注意事项与陷阱、警告与错误表格、常见困惑、设计决策、来源链接（提交、PR、Issue）。

适用场景

  • 研究 React API 或概念，需要权威的用法示例和注意事项。
  • 需要了解某个 React 特性的警告、错误和触发条件。
  • 需要追溯某个 API 的设计决策和历史变更。
  • 需要对比 Flow 和 TypeScript 类型签名的差异。
  • 需要发现社区中常见的困惑和误解。

限制

  • 不使用网络搜索：不允许 Stack Overflow、博客文章或网络搜索。仅允许通过 gh CLI 访问 GitHub API。
  • 不依赖先验知识：如果“知道”某个 API 的行为，仍必须找到源证据。
  • 每个代码示例必须来自实际源文件，不能生成示例代码。
  • 所有 6 个代理必须运行，每个提供独特视角。
  • 每个声明都需要 file:line 或 PR/Issue 引用。
  • 最终文档前需检查：React 仓库位于 .claude/react 且提交哈希已知；所有 6 个代理已并行派发；每个代码示例有源文件引用；警告/错误表格有源位置；没有无源证据的声明；Flow/TS 类型差异已记录；来源链接部分完整。

常见错误避免

  • 信任先验知识。
  • 生成示例代码。
  • 跳过代理。
  • 无来源总结。
  • 使用网络搜索。