用途:定位一个未知 prop 最初在哪里定义与创建,并展示它穿过组件树的完整传递路径(prop drilling)。支持输入 prop 名称(必填),可选组件名或文件路径缩小范围,例如 orderData、orderData OrderTable 或 orderData src/.../OrderTable.tsx。
主要能力与工作流:1)查找 prop 的类型定义(Props 类型),若为交叉类型或工具类型则回溯原始声明;2)确定数据来源,区分 useState/useReducer、useQuery/useSWR/fetch、useMemo/useCallback、字面量常量或父级参数;3)自来源组件向下追踪 JSX 传递,标记每一步的角色为 origin、passthrough、consumer 或 transform,并检测重命名(如 data={orderData});4)可选在达到 3 层以上时给出 Context API 或组合模式的改进建议。
输出:按固定顺序给出「Origin Definition」(类型定义与值来源,以 startLine:endLine:filepath 格式的可点击代码块)、「Drilling Path」表格和「Component Flow」Mermaid 流程图。
用法与兼容性:在 Codex 与 Cursor Agent 中运行时需把 Claude Code 专有原语做等价转换(例如 AskUserQuestion、TodoWrite、Task 及 EnterPlanMode/ExitPlanMode),并把 ~/.claude/... 路径映射到对应平台的 skills 目录;所有 MCP 工具(Serena、context7、exa)均为可选,缺失时回退到 Grep、Read、Glob 等标准工具。
限制:需要可读取的项目源码;只追踪 React props;重命名与继承类型可能影响精度;改进建议仅在传递深度达到 3 层时给出。分类、收费、价格与支持平台等更多细节资料未提供。