AI Coding / React
React Scan / React Grab / React Doctor：AI Coding 時代的 React 人機協作三件套，從找效能浪費到 CI quality gate
govin999999 分享用 React Doctor 搭配 Codex Goal，一次掃描並修掉大量 React 品質與效能問題。貼文也整理 Aiden Bai / Million 團隊相關三個工具：React Scan 用瀏覽器高亮重複渲染，React Grab 把 UI 元素轉成檔案路徑/行號/元件 stack 給 AI 精準修改，React Doctor 掃描 state/effect/performance/architecture/security/accessibility 等問題並可接 CI。GitHub/README 核對顯示 React Scan 與 React Grab 為 MIT；React Doctor repo 為 millionco/react-doctor，README 稱 MIT 並揭露 telemetry 可用 --no-telemetry 關閉。
2026年6月30日3 分鐘閱讀👁 7
React × AI Coding Agent × Production Gate
React Scan / React Grab / React Doctor：AI Coding 時代的 React 人機協作三件套，從找效能浪費到 CI quality gate
AI 很會生 React code，但真正上 production 前需要一套「看得見、指得準、擋得住」的品質流程。React Scan 找重複渲染，React Grab 把畫面元素定位到 source code，React Doctor 則把 state/effect/performance/security/accessibility 等問題變成可掃描、可修、可進 CI 的 quality gate。
Threads 來源：govin999999：React Doctor × Codex Goal 與 Aiden Bai React 工具鏈
相關 repo：aidenybai/react-scan、aidenybai/react-grab、millionco/react-doctor
相關 repo：aidenybai/react-scan、aidenybai/react-grab、millionco/react-doctor
原文重點
- 作者用 React Doctor 搭配 Codex 的 Goal 跑了約 2 小時，聲稱解決 300 個程式碼品質與效能問題，拿到 100 分健康分數。
- 作者把 React Scan、React Grab、React Doctor 視為 AI 時代 React 人機協作流程。
- 核心流程是：先在瀏覽器看見問題，再把 UI 精準定位到原始碼，最後用 Doctor / CI 擋下 AI 寫壞的 React。
三個工具各自解什麼問題
| 工具 | 用途 | AI coding 價值 |
|---|---|---|
| React Scan | 在瀏覽器中偵測 React performance issues，highlight 需要優化的 components。 | 讓開發者和 agent 先知道哪裡重複 render / 浪費效能。 |
| React Grab | 按 Cmd/Ctrl+C 選 UI element，複製元素與 component stack、source location。 | 把「畫面上這個東西」轉成 AI 可用的檔案路徑、行號、元件 context。 |
| React Doctor | 掃描 React codebase 的 state/effects、performance、architecture、security、accessibility 問題。 | 把 reviewer taste 與 React best practices 做成自動化 production gate。 |
GitHub / README reality check
| Repo | 核對結果 |
|---|---|
aidenybai/react-scan | GitHub description：Scan and fix React performance issues。License：MIT。README：no code changes / highlights components / toolbar；quick start npx -y react-scan@latest init。 |