design
This Claude Code skill configures three development-only tools for React projects: react-grab enables AI agents to copy UI element source locations and context via keyboard shortcut, react-scan visualizes component renders and detects performance regressions, and react-doctor audits code for React anti-patterns and security issues. Use this skill when initializing or improving React projects to establish faster debugging workflows and catch common coding mistakes before deployment.
git clone --depth 1 https://github.com/code-yeongyu/lazycodex /tmp/design && cp -r /tmp/design/plugins/omo/skills/frontend/references/design/react-dev-tooling- ~/.claude/skills/designreact-dev-tooling-skill.md
# React Dev Tooling Defaults
When setting up or working on a React project, install three dev-only tools by default unless the user explicitly opts out. They make every coding agent's frontend work measurably faster and the resulting code measurably better.
## The three tools
| Tool | What it does | Why it's a default |
|---|---|---|
| **react-grab** | Cmd/Ctrl+C on any UI element copies its source location + nearby code + component stack into the clipboard, formatted for an AI agent to act on. | Cuts agent edit time **~2×** because the agent receives the actual source coordinates instead of guessing from a screenshot. From the author of Million.dev. |
| **react-scan** | Visually highlights every component render in dev. Detects unnecessary re-renders, slow renders, and tracks render causes. Has a headless `react-scan/lite` mode for automated perf measurement. | Catches re-render regressions the moment they happen, before they ship. Pairs with the perfection ruleset (`../perfection/README.md`) for Lighthouse 100 work. |
| **react-doctor** | Static scanner that finds bad React patterns across state & effects, perf, architecture, security, a11y. One-shot `npx react-doctor@latest` audit + CI GitHub Action + agent-skill installer. | Catches AI-generated React anti-patterns deterministically. Run before commit and in CI. Installs itself as a Claude Code / OpenCode / Cursor / Codex skill so the agent learns from each scan. |
All three are **dev-only** (`process.env.NODE_ENV === 'development'` or `import.meta.env.DEV`). None ship to production.
## Default install for a React project
Run from project root. This is the canonical setup. Skip ONLY if the user says "no extra dev tools" or the project README explicitly forbids them.
```bash
# 1. react-grab — adds itself to package.json + entry file with dev gate
npx grab@latest init
# 2. react-doctor — first audit + agent-skill install
npx react-doctor@latest install
# 3. react-scan — adds itself with dev gate
npx react-scan@latest init
```
The `init`/`install` CLIs handle framework detection and gating for you. If the CLI fails or the project uses a non-standard setup, fall back to the manual snippets below.
After install, confirm by reading the diff. Each tool should appear ONLY behind a `process.env.NODE_ENV === "development"` / `import.meta.env.DEV` gate.
## Manual install (when the CLI does not fit)
### Next.js (App Router) — `app/layout.tsx`
```tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
{process.env.NODE_ENV === "development" && (
<>
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
<Script
src="//unpkg.com/react-scan/dist/auto.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
</>
)}
</head>
<body>{children}</body>
</html>
);
}
```
### Next.js (Pages Router) — `pages/_document.tsx`
Same pattern, but the `<Script>` tags live inside `<Head>` from `next/document` and gate on `process.env.NODE_ENV === 'development'`.
### Vite — `src/main.tsx` (or wherever the entry is)
```tsx
if (import.meta.env.DEV) {
void import("react-grab");
void import("react-scan");
}
```
Optionally add the Vite plugin for richer `displayName` data on react-scan:
```ts
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import reactScan from "vite-plugin-react-scan";
export default defineConfig({
plugins: [react(), reactScan()],
});
```
### Webpack / CRA — entry file top
```ts
if (process.env.NODE_ENV === "development") {
void import("react-grab");
void import("react-scan");
}
```
### Remix — `app/root.tsx`
```tsx
export default function App() {
return (
<html lang="en">
<head>
<Meta />
{process.env.NODE_ENV === "development" && (
<>
<script crossOrigin="anonymous" src="//unpkg.com/react-grab/dist/index.global.js" />
<script crossOrigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" />
</>
)}
<Links />
</head>
<body>
<Outlet />
<Scripts />
</body>
</html>
);
}
```
### Astro — `src/layouts/Layout.astro`
```astro
---
const isDev = import.meta.env.DEV;
---
<head>
{isDev && (
<>
<script crossorigin="anonymous" src="//unpkg.com/react-grab/dist/index.global.js" is:inline></script>
<script crossorigin="anonymous" src="//unpkg.com/react-scan/dist/auto.global.js" is:inline></script>
</>
)}
</head>
```
## react-doctor — wire the scan, not the bundle
react-doctor is a one-shot CLI plus a CI action, NOT a runtime injection. Wire it in three places:
1. **As an agent skill** so your coding agent learns from each scan and avoids the issues next time:
```bash
npx react-doctor@latest install
```
Detects Claude Code / OpenCode / Cursor / Codex automatically and writes the skill into the right location.
2. **As a local pre-commit / scripted gate:**
```bash
# Manual audit
npx react-doctor@latest
# JSON for scripting / CI
npx react-doctor@latest --json > .react-doctor-report.json
```
3. **As a CI gate** that blocks PRs when the static scan regresses:
```yaml
# .github/workflows/react-doctor.yml
name: React Doctor
on: [pull_request]
jobs:
audit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: millionco/react-doctor@main
```
## Feature flag — opt-out without surgery
The `NODE_ENV === "development"` gate already keeps these out of production. For temporarily disabling the runtime tools during a dev session (e.g. when profiling without instrumentation overhead),Use when Codex needs to understand or respond to automatic comment-checker feedback emitted after an edit-like PostToolUse hook.
Use when Codex needs language-server diagnostics, definitions, references, symbols, or rename safety checks in the current workspace.
Use when the user asks about Codex Rules behavior, injected project rules, supported rule file locations, matching, or environment configuration.
MUST USE for planning before coding: 5+ steps, ambiguous scope, multiple modules, architecture decisions, a vague 'just make it good / figure out what to build' brief, or any request to plan, interview, or break work down. Explore-first planning consultant (Prometheus) that grounds in the codebase, asks only the forks exploration cannot resolve - or researches them to best practice when the intent is fuzzy - waits for explicit approval, then writes ONE decision-complete work plan a worker executes with zero further interview. Triggers: ulw-plan, plan this, make a plan, plan before coding, interview me, break this down, start planning, plan mode, just make it good, figure out what to build.
Goal-like loop that uses ultrawork mode to decompose work into systematic, evidence-bound steps.
MUST USE for any real runtime debugging across ANY language or binary — crashes, silent failures, wrong responses, stuck processes, memory leaks, async misbehavior, unexplained timing, reverse engineering. Runs a hypothesis-driven loop: form ≥3 hypotheses, investigate in parallel, after 2 failed rounds spawn Oracles from orthogonal angles, confirm root cause, lock with a failing test, fix minimally, QA by actually USING the system, scrub artifacts. The actual HOW lives in `references/` — READ THEM. Triggers: 'debug this', 'why is X not working', 'hanging', 'attach a debugger', 'reverse engineer', 'pwndbg', 'gdb', 'lldb', 'node inspect', 'tsx debug', 'pdb', 'dlv', 'delve', 'rust-gdb', 'set a breakpoint', 'context window exploded', 'why is the response empty', 'attach the debugger', 'debug it', 'why is this happening', 'trace this bug', 'reproduce and fix', 'silent failure', 'HTTP 200 but empty', 'why did it stop', 'inspect the binary', 'reverse engineering', 'playwright'.
Designer-turned-developer who crafts stunning UI/UX even without design mockups
MUST USE whenever a task needs a commit or git-history investigation. Covers atomic commits, staging, commit-message style, rebase, squash, fixup/autosquash, blame, bisect, reflog, git log -S/-G, and questions like who wrote this or when was this added. Do not use for ordinary code edits unless the user asks for git work.