← ClaudeAtlas

bld-optimize-reactlisted

or: Scan React/Next source for real defects (bugs, hooks, re-renders, a11y) with react-doctor and eslint, triage and fix. Use for "scan this app", "audit this app", "check for re-renders", or before shipping a screen. Live site is /bld-optimize-app.
mnguyenht/bld-package · ★ 1 · Web & Frontend · score 64
Install: claude install-skill mnguyenht/bld-package
# bld-optimize-react — find what's actually broken, then triage Three tools, **two of which overlap**. Read this before running anything. | Tool | Type | Installed as | What it uniquely catches | |---|---|---|---| | **react-doctor** | static CLI | **global** (`react-doctor`) | bugs, hooks rules, perf, a11y, security, dead code, supply chain | | **app's own eslint** | static | per-app devDep | Next-specific rules react-doctor lacks (`no-img-element`, `no-html-link-for-pages`) | | **react-scan** | **runtime** overlay | global CLI (`init` only) | re-renders you can only see by *using* the app | | **`/code-review`** | model review of the **diff** | built-in | logic errors no rule encodes — run *after* fixing | ## The redundancy — do NOT run eslint-plugin-react-hooks separately `react-doctor` **bundles `eslint-plugin-react-hooks` as a dependency** and runs its rules under its own names: - `eslint-plugin-react-hooks/rules-of-hooks` → `react-doctor/rules-of-hooks` (error) - `eslint-plugin-react-hooks/exhaustive-deps` → `react-doctor/exhaustive-deps` (warn) Running the plugin standalone re-reports the same findings. **Phase 1 already covers hooks.** Phase 2 exists only for the Next-specific rules, which is a genuinely different set. ## Phase 1 — react-doctor (always; this is 90% of the value) ```bash react-doctor <app-path> --no-telemetry ``` **`--no-telemetry` is mandatory, every run.** react-doctor ships `@sentry/node` and posts to a score API by default. The flag kills bo