aidenybai / react-grab

Problem: 在使用Cursor、Claude Code等AI编程助手时，需要手动查找和复制相关组件代码，过程繁琐且容易出错。

Solution: 在浏览器中悬停目标UI元素，按⌘C/Ctrl+C即可一键复制文件路径、React组件和HTML源码，直接粘贴到AI助手提问框。

Example: 在Cursor中询问“如何修改这个按钮样式”，用React Grab复制按钮组件，AI能立即理解上下文并给出准确修改建议。

Problem: 在大型React项目中，从UI界面反向查找对应的源码文件需要手动搜索，效率低下。

Solution: 直接点击页面元素，React Grab会显示组件文件名和路径，支持一键在编辑器中打开对应文件。

Example: 测试时发现某个表单组件有bug，用React Grab点击该表单，立即知道它来自`src/components/Form/ContactForm.tsx`。

Problem: 代码审查时难以直观地将UI问题与具体代码关联，需要来回切换浏览器和代码库。

Solution: 审查人员可直接在部署的网站上使用React Grab获取问题元素的完整代码上下文，精准定位问题代码位置。

Example: QA报告“提交按钮在移动端布局错乱”，审查时用React Grab复制按钮组件，快速定位到需要修改的样式文件。

Problem: 团队需要定制化的开发调试工具，但从头开发元素选择器和代码提取功能成本高。

Solution: 利用React Grab提供的primitives（如getElementContext、freeze等）快速构建自己的代码检查或文档生成工具。

Example: 开发内部设计系统文档工具，用React Grab的primitives自动提取组件使用示例和源码，生成实时文档。